:root {
        --font-heading: "Merriweather", serif;
        --font-body: "Merriweather", serif;

        --primary-color: #AE8971;
        --secondary-color: #BABAB0;
        --cta-color: #AE8971;
        --text-color: #504C46;
        --background-color: #FFFCF7;
    }
    
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html {
        font-size: 62.5%;
        overflow-x: hidden;
        scroll-behavior: smooth;
    }

    body {
        font-family: var(--font-body);
        line-height: 1;
        font-weight: 400;
        color: var(--text-color);
        overflow-x: hidden;
    }

    p,
    ul {
    font-size: 1.6rem;
    line-height: 1.5;
    }

    /* ************************************** */
    /* REUSABLE COMPONENTS */
    /* ************************************** */

    .container {
        max-width: 130rem;
        padding: 0 3.2rem;
        margin: 0 auto;
        margin-bottom: 6.4rem;
    }

    .heading-2 {
        font-family: var(--font-heading);
        color: var(--secondary-color);
        text-align: center;
        font-size: 3.2rem;
        font-weight: 300;
        margin-bottom: 9rem;
    }

    /* ************************************** */
    /* PARALLAX */
    /* ************************************** */

    .parallax {
        will-change: transform;
        transition: transform 0.1s linear;
    }

    /* ************************************** */
    /* HELPER CLASSES */
    /* ************************************** */

    .margin-bottom-large {
        margin-bottom: 8rem;
    }

    .margin-bottom-medium {
        margin-bottom: 3.2rem;
    }



    /* ************************************** */
    /* HERO */
    /* ************************************** */

    .hero-breakout {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    .hero-slider {
        position: relative;
        width: 100vw;
        max-width: 100vw;
        height: 80vh;
        overflow: hidden;
        margin-bottom: 12.8rem;
    }

    .hero {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 80vh;

        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        opacity: 0;
        visibility: hidden;

        transition: opacity 2s ease-in-out;

        z-index: 1;        
    }

    .hero.active {
        opacity: 1;
        visibility: visible;
        z-index: 2;
    }

    .hero-succulent {
        background-image: url("https://honeyguideshop.co.za/wp-content/uploads/2026/06/hero-succulent-1.webp");
    }

    .hero-cacti {
        background-image: url("https://honeyguideshop.co.za/wp-content/uploads/2026/06/hero-cacti.webp");
    }

    .hero-clivia {
        background-image: url("https://honeyguideshop.co.za/wp-content/uploads/2026/06/hero-clivia.webp");
    }

    .hero-honey {
        background-image: url("https://honeyguideshop.co.za/wp-content/uploads/2026/06/hero-honey.webp");
    }


    .hero-container {
        max-width: 130rem;
        padding: 8rem 10rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        align-content: center;
        transform: translateY(-10rem);
    }

    .heading-hero {
        font-family: "Merriweather", serif;
        color: #FFFCF7;
        font-size: 4.4rem;
        margin-bottom: 1.6rem;
        text-shadow: 0 0 10px #000000ab;
    }
    .hero-desc {
        color: #FFFCF7;
        font-family: "Merriweather", serif;
        font-size: 1.6rem;
        font-weight: 300;
        margin-bottom: 2.4rem;
        text-shadow: 0 0 10px #000;
    }
    .cta-btn:link, .cta-btn:visited {

        text-decoration: none;
        color: #FFFCF7;
        font-family: "Merriweather", serif;
        font-size: 1.6rem;
        border: solid 2px #FFFCF7;
        padding: 0.2rem 0.9rem;
        transition: all 0.3s;
    }
    .cta-btn:hover,
    .cta-btn:active {
        background-color: #fff;
        color: #061900;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }    

    /* ************************************** */
    /* CATEGORIES */
    /* ************************************** */

    .category-section {
        margin-bottom: 8rem;
    }

    .category-container {
        max-width: 130rem;
        padding: 0 3.2rem;
        margin: 0 auto;
        margin-bottom: 6.4rem;
    }

    .category-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1.6rem;
    }

    .category-card {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
    }


    .category-img {
        width: 100%;
        display: block;
        transition: transform 0.3s ease;
    }

    .category-img-hor {
        display: none;
    }

    .category-link:hover img {
        transform: scale(1.05);
    }

    .category-link {
        text-decoration: none;
        font-family: "Merriweather", serif;
        border: solid 2px #FFFCF7;
        
    }

    .category-card-desc {
        position: absolute;
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        margin-bottom: 0;

        color: #fff;
        font-family: "Merriweather", serif;
        font-size: 2rem;
        font-weight: 700;
        text-align: center;

        border: 2px solid #fff;
        padding: 1rem 2rem;
        text-shadow: 0 0 10px rgba(0,0,0,0.8);
    }
     

    /* ************************************** */
    /* WATERBERG */
    /* ************************************** */

    .waterberg-section {
        margin-bottom: 6.4rem;
    }

    .waterberg-breakout {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);

        background-image: url("https://honeyguideshop.co.za/wp-content/uploads/2026/06/waterberg-bg.svg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 80vh;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .waterberg-container {
        width: 100%;
        max-width: 130rem;
        padding: 0 3.2rem;
        margin: 0 auto;

        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
        justify-items: center;
        gap: 6.4rem;
        position: relative;
    }
    .waterberg-heading {
        font-family: "Merriweather", serif;
        font-size: 3.2rem;
        color: #504C46;
        margin-bottom: 1.6rem;
    }
    .waterberg-p {
        font-family: "Merriweather", serif;
        font-size: 1.6rem;
        color: #504C46;
    }
    .waterberg-img {
        border-radius: 20px;
    }
    .waterberg-deco {
        position: absolute;
        height: 22rem;
        width: auto;
        bottom: -5rem;
    }

   
    /* ************************************** */
    /* WHY BUY FROM US */
    /* ************************************** */


    .why-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1.6rem;
    }

    .why-card {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
    }


    .why-img {
        width: 100%;
        display: block;
        transition: transform 0.3s ease;
    }

    .why-img-hor {
        display: none;
    }

    .why-link:hover img {
        transform: scale(1.05);
        cursor: default;
    }

    .why-link {
        text-decoration: none;
        font-family: "Merriweather", serif;
        border: solid 2px #FFFCF7;
        
    }

    .why-card-desc {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        margin-bottom: 0;

        color: #fff;
        font-family: "Merriweather", serif;
        font-size: 2rem;
        font-weight: 700;
        text-align: center;

        text-shadow: 0 0 10px rgba(0,0,0,0.8);
    }


    /* ************************************** */
    /* REVIEWS */
    /* ************************************** */

    .reviews-container {
        max-width: 130rem;
        padding: 0 3.2rem;
        margin: 0 auto;
    }
      .review-container {
        overflow: hidden;
        position: relative;
    }
    .review-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    
    .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: "Merriweather", serif;
        font-size: 2rem;
        margin-bottom: 1.6rem;
    }
    
    .card-description {
        font-family: "Merriweather", serif;
        font-size: 1.6rem;
        margin-bottom: 1.6rem;
        line-height: 1.5;
    }

    /* ************************************** */
    /* CALL TO ACTION */
    /* ************************************** */

    .cta-breakout {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);

        background-color: #BABAB0;
        background-image: url("https://honeyguideshop.co.za/wp-content/uploads/2026/06/cta-img.webp");
        background-position: right;
        background-repeat: none;
        background-size: cover;

        margin-bottom: 12.8rem;
    }

    .cta-container {
        max-width: 130rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        align-content: center;
        padding: 6.4rem 0;
    }

    .cta-heading {
        font-family: "Merriweather", serif;
        color: #FFFCF7;
        font-size: 5.2rem;
        font-weight: 400;
    }

    .cta-p {
        font-family: "Merriweather", serif;
        color: #504C46;
        font-size: 1.6rem;
        margin-bottom: 6.4rem;
    }

    .cta-form label {
        display: block;
        font-size: 2.4rem;
        margin-bottom: 0.8rem;
    
        color: #504c46;
        font-family: "Merriweather", serif;
  }
  
  .cta-form input,
  select {
    width: 100%;
    padding: 1.2rem;
    border: none;
    border-radius: 10px;
    margin-bottom: 2.4rem;
    background-color: #FFFCF7 !important;
  }
  
  .newsletter-box {
    display: grid;
    grid-template-columns: 1fr 6fr;
  
    align-content: center;
    justify-items: start;
  }
  
  .cta-btn-form {
    font-family: "Merriweather", serif !important;
    font-size: 2.4rem;
    padding: 0.8rem 2.4rem;
    width: 100%;
    margin-bottom: 1rem;
  
    color: #f9f9f9;
    background-color: #504c46 !important;
    border: none;
  
    border-radius: 10px;
  
    cursor: pointer;
  }
  
  .cta-btn-form:hover {
    background-color: #504c46;
  }
  
  .form-disclaimer {
    font-size: 1.6rem;
  }

    /* ************************************** */
    /* BELOW 1350px */
    /* ************************************** */

    @media (max-width: 84.375rem) {
        .cta-container {
            padding: 6.4rem 3.2rem;
        }
    }

    /* ************************************** */
    /* BELOW 1150px */
    /* ************************************** */

    @media (max-width: 71.875rem) {
        .hero-container {
            transform: translateY(-5rem);
        }
        .category-card-desc {
            font-size: 1.2rem;
            bottom: 1.6rem;
        }
    }

    /* ************************************** */
    /* BELOW 1050px */
    /* ************************************** */

    @media (max-width: 65.625rem) {
        .waterberg-deco {
            height: 15rem;
        }
    }

    /* ************************************** */
    /* BELOW 1000px */
    /* ************************************** */

    @media (max-width: 62.5rem) {
        .hero-container {
            grid-template-columns: 1fr;
        }
        .heading-hero, .hero-desc, .cta-btn {
            text-align: center;
        }
        .hero-flex {
            display: flex;
            flex-direction: column;
            gap: 1.6rem;
            align-items: center;
            justify-content: center;
        }
        .cta-btn {
            display: block;
        }
    }

    /* ************************************** */
    /* BELOW 960px */
    /* ************************************** */

    @media (max-width: 60rem) {
        .category-grid {
            gap: 1rem;
        }
        .category-card {
            border-radius: 10px;
        }
    }

    /* ************************************** */
    /* BELOW 900px */
    /* ************************************** */

    @media (max-width: 56.25rem) {
        .cta-container {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .waterberg-deco {
            display: none;
        }

        .why-card-desc {
            font-size: 1.2rem;
        }
    }

    /* ************************************** */
    /* BELOW 820px */
    /* ************************************** */

    @media (max-width: 51.25rem) {
        .heading-2 {
            margin-bottom: 6.4rem;
        }
        .category-container, .category-section {
            margin-bottom: 0;
        }
        .category-section {
            height: 100%;
            width: auto;
        }

    }

    /* ************************************** */
    /* BELOW 800px */
    /* ************************************** */

    @media (max-width: 50rem) {
        .container {
            padding: 0 1.6rem;
        }
        .category-container {
            transform: translateY(-12rem);
            margin-bottom: 0;
            padding: 0rem 1.6rem;
        }
        .category-grid {
            grid-template-columns: repeat(1, 1fr);
        }
        .category-img {
            display: none;
        }
        .category-img-hor {
            display: block;
        }
        .category-card-desc {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            border: none;
            font-size: 2.4rem;

            display: flex;
            align-items: center;
            justify-content: center;

        }
        .mobile-break {
            display: none;
        }
    }

    /* ************************************** */
    /* BELOW 760px */
    /* ************************************** */

    @media (max-width: 47.5rem) {
        .why-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .last-why-child {
            display: none;
        }
        .why-card-desc {
            font-size: 1.6rem;
        }
    }


    /* ************************************** */
    /* BELOW 705px */
    /* ************************************** */

    @media (max-width: 44.0625rem) {
        .category-container {
            transform: translateY(-12rem);
            margin-bottom: 0;
        }
        .category-grid {
            grid-template-columns: repeat(1, 1fr);
        }
        .category-img {
            display: none;
        }
        .category-img-hor {
            display: block;
        }
        .category-card-desc {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60%;
            border: none;
            font-size: 2.4rem;

            display: flex;
            align-items: center;
            justify-content: center;

        }
        .mobile-break {
            display: none;
        }
    }
    

    /* ************************************** */
    /* BELOW 700px */
    /* ************************************** */

    @media (max-width: 43.75rem) {
        .hero-breakout {
            margin-bottom: 0;
        }

        .waterberg-breakout {
            background-color: #BABAB0;
            background-image: none;
            padding-top: 6.4rem;
            padding-bottom: 6.4rem;
        }

        .waterberg-container {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .review-grid {
            grid-template-columns: 1fr;
            text-align: center;
        }
    }

    /* ************************************** */
    /* BELOW 500px */
    /* ************************************** */

    @media (max-width: 31.25rem) {
        .heading-hero {
            font-size: 3rem;
            line-height: 1;
        }
    }

    
    /* ************************************** */
    /* BELOW 400px */
    /* ************************************** */

    @media (max-width: 25rem) {
        .category-container {
            padding: 0 1.6rem;
        }

        .category-card-desc {
            font-size: 1.8rem;
        }

        .container {
            padding: 0 1.6rem;
        }
    }