/* ---------------------------------------------------------------------------------
   ================================== NORMALE CSS ==================================
   --------------------------------------------------------------------------------- */

/* ============================= UNIVERSELE SELEKTOR (*) ============================= */
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

/* ============================= GLOBAL LYF EN STYLE ============================= */
    body{
        font-family:'Poppins',sans-serif;
        background:#f4f6f3;
        color:#333;
    }

    h1,h2,h3{
        color:#2f4f2f;
        font-family: "Poppins";
    }
    
    section{
        padding:40px 10%;   /* Verminderde padding vir kleiner spasie tussen sections */
    }

/* ============================= KOP & NAVIGASIE ============================= */
    header {
        background: white;
        position: sticky;   /* Maak die kop afbeweeg soos jy scroll sodat dit altyd bo in jou skerm is */
        top: 0;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        z-index: 1000;
    }

    /* Navigasie houer - skakels en logo + teks */
    .nav-houer {
        max-width: 1400px;
        margin: 0 auto;
        padding: 1rem 1.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

/* Groep vir handelsmerk (logo) deel links op navigasie balk bevat prent en teks */
    .logo-area {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;     /* sodat nie krimp nie */
    }

    .logo-teks {
        margin-left: -15px;
        white-space: nowrap;
    }
    
    /* Boerdery / Besigheid naam */
    .logo-teks h1 {
        font-size: 1.3rem;
        font-weight: 700;
        font-family: 'Segoe UI';
        color: #064e3b;          
    }

    /* Slagspreuk */
    .logo-teks p {
        font-size: 0.75rem;
        color: #6b7280;
        margin-top: -0.25rem;   /* Maak die teks effens nader aan die hoof teks(h1) */
    }

    .logo-img {
        width: 55px;             
        height: 55px;       
        object-fit: cover;                  /* maak dat handelsmerk (logo) prent mooi binne sirkel pas */
        border-radius: 50%;                 /* maak blok heeltemal rond(sirkel) */
        border: 3px solid #065f46;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        margin-right: 1rem;
        transition: transform 0.3s ease;    /* klein sweef-effek */
        flex-shrink: 0;
    }

    .logo-img:hover {
        transform: scale(1.08);     /* maak handelsmerk (logo) sirkel effens groter waneer daaroor sweef */
    }

    .logo-teks:hover {
        transform: scale(1.08);     /* maak handelsmerk (logo) sirkel effens groter waneer daaroor sweef */
    }

/* Navigasie / skakels lys */
    /* Houer wat hoofskakels / navigasie in is */
    .nav {
        /* Mobiele menu animasie */
        transition: max-height 0.4s ease, opacity 0.3s ease;
    }

    nav ul {
        display: flex;
        list-style: none;
        gap: 1.8rem;    /* Meer spasie tussen die navigasie skakels */
    }

    nav li {
        position: relative;
    }

    /* Individuele hoofskakels */
    nav a {
        text-decoration: none;                              /* Verwyder onderstreping van skakels */
        color: #333;
        font-weight: 600;
        padding: 10px 0;
        transition: color 0.2s ease, transform 0.5s ease;   /* Voeg transform-transition by - sodat kleur en groote geleidelik verander */
        display: inline-block;                              /* Maak skakels blok element sodat die transform werk sonder op die webblad te breek */
    }

    nav a:hover {
        color: #4CAF50;       /* Verander kleur na groen wanneer jy oor die skakel sweef */
        transform: scale(1.2);  /* Vergroot teks effens (120%) waneer op die skakel sweef */
    }

/* Subskakels - Dropdown lys */
    .dropdown .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: #f0f7f0;
        min-width: 220px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.12);
        border-radius: 6px;
        z-index: 10;
        padding: 8px 0;
        margin-top: 4px;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Individuele subskakels */
    .dropdown-content a {
        display: block;
        padding: 10px 16px;
        color: #333;
        text-decoration: none;
        font-weight: 500;
    }

    .dropdown-content a:hover {
        background: #c2ebc4;
        color: #2e7d32;
    }

    /* Klein pyltjie knoppie */
    .dropdown:hover .dropbtn i {
        transform: rotate(180deg);
        opacity: 1;
    }

    .dropbtn {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    /* Dropdown pyl ikoon */
    .dropbtn i {
        font-size: 0.7em;
        margin-left: 6px;
        transition: transform 0.3s ease;
        opacity: 0.7;
    }

/* Inteken - regs in navigasiebalk */
    .nav-right {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .auth-area {
        margin-left: 1rem;
    }

    .auth-btn {
        background: none;
        border: none;
        font-size: 1.55rem;
        color: #333;
        cursor: pointer;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .auth-btn:hover {
        background: #f0f7f0;
        color: #065f46;
        transform: scale(1.15);
    }

    .auth-btn.logged-in {
        color: #065f46;
    }

    /* Modal */
    .modal {
        display: none;
        position: fixed;
        z-index: 2000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        align-items: center;
        justify-content: center;
    }

    .modal-content {
        background: white;
        padding: 2rem;
        border-radius: 16px;
        width: 90%;
        max-width: 420px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        position: relative;
    }

    .close-modal {
        position: absolute;
        margin-top: 2px;
        right: 16px;
        font-size: 2rem;
        cursor: pointer;
        color: #dc2626;
        font-size: 33px;
    }

    .close-modal:hover {
        color: #dc2626;
    }

    .close-modal-circle {
        border-radius: 50%;
        border-color: transparent;
    }

    .profile-title {
        margin-bottom: 0.4rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    .profile-logout-btn {
        margin-top: 1rem;
        width: 100%;
        padding: 10px;
        border: 1px solid #d1d5db;
        background: #f9fafb;
        border-radius: 8px;
        color: #374151;
        font-weight: 600;
        cursor: pointer;
    }

    .order-history-item {
        background: #f3f4f6;
        border: 1px solid #d1d5db;
        border-radius: 10px;
        margin-bottom: 0.6rem;
        padding: 0.65rem 0.75rem;
    }

    .order-history-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.45rem;
    }

    .order-history-products {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .order-history-products li {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 100px;
        align-items: baseline;
        column-gap: 0.8rem;
        font-size: 0.92rem;
        margin: 0;
        padding: 0;
    }

    .order-item-name {
        min-width: 0;
    }

    .order-item-meta {
        text-align: left;
        white-space: nowrap;
    }

    .order-history-reorder {
        display: block;
        margin: 0.55rem auto 0;
        padding: 6px 10px;
        border: 1px solid #065f46;
        border-radius: 7px;
        background: #ecfdf5;
        color: #065f46;
        font-weight: 600;
        cursor: pointer;
    }

    .cart-order-history .order-history-item {
        width: 130%;
        margin-left: -50px;
    }

    .tab-buttons {
        display: flex;
        margin-bottom: 1.5rem;
        border-bottom: 2px solid #eee;
    }

    .tab-btn {
        flex: 1;
        padding: 12px;
        background: none;
        border: none;
        font-size: 1.05rem;
        font-weight: 600;
        cursor: pointer;
        color: #666;
    }

    .tab-btn.active {
        color: #065f46;
        border-bottom: 3px solid #4CAF50;
    }

    .form-group {
        margin-bottom: 1.2rem;
    }

    .form-group label {
        display: block;
        margin-bottom: 6px;
        font-weight: 500;
    }

    .form-group input {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
    }

    .modal button[type="submit"] {
        width: 100%;
        padding: 14px;
        background: #4CAF50;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 1.05rem;
        font-weight: 600;
        cursor: pointer;
        margin-top: 10px;
    }

    .modal button[type="submit"]:hover {
        background: #3e8e41;
    }

    /* Maak seker dit bly heel regs op alle skerms */
    .nav-houer {
        justify-content: space-between;   /* Dit help reeds baie */
    }

/* ============================= HERO ============================= */
    .hero {
        height: 600px;
        background-position: center;  /* Hou die posisie */
        background-size: cover;       /* Hou die grootte */
        background-repeat: no-repeat; /* Hou die herhaling */
        display: flex;                /* Die res bly dieselfde */
        align-items: center;
        justify-content: center;
        position: relative;
    }

/* Gebruik om swart overlay oor hero prent te plaas */
    .hero::before {
        content: "";    /* Skep lee elent (geen teks) */
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.45);
    }

    .hero-teks {
        position: relative;     /* Plaas die inhoud bo op die overlay */
        text-align: center;
        color: white;
        max-width: 700px;
    }

    .hero-teks h1 {
        font-size: 48px;
        margin-bottom: 15px;
        color: white;
        text-shadow: 0 3px 8px rgba(0, 0, 0, 0.65);
    }

    .hero-teks p {
        font-size: 18px;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    }

/* ============================= SKAKEL KNOPPIE ============================= */
    .cta{
        /* background:#2f4f2f; */
        color:white;
        text-align:center;
        border-radius: 10px;
    }

    .cta h2{
        color:white;
    }

    /* Knoppie styl vir alle knoppies binne '.cta' en '.afdeling' */
    .cta button, .afdeling button{
        background:#4CAF50;
        color:white;
        border:none;
        padding:12px 25px;
        border-radius:6px;
        cursor:pointer;     /* Maak muis pyltjie 'n handjie as bo oor sweef */
        margin-top:20px;
    }

    .cta button:hover{
        background:#3e8e41;
    }

/* ============================= TERUG NA BO KNOPPIE ============================= */
    #topBtn{
        position:fixed;     /* Sodat knoppie altyd op dieselfde plek is waneer jy scroll */
        bottom:30px;
        right:30px;
        background:#4CAF50;
        color:white;
        border:none;
        padding:12px 16px;
        border-radius:50%;
        cursor:pointer;
        display:none;
    }

    #topBtn:hover {
        background: #3e8e41;
    }

/* ============================= ALGEMENE BLADSY AFDELINGS ============================= */
    /* Sodat seksies van die volle bladsy 'n ander agtergronkleur kan he */
    .afdeling{
        background:#ffffff;
    }

    .afdeling-2{
        background:#f4f6f3;
    }

    .afdeling-3{
        background:#eef0e8;
    }

/* ============================= VOETSKRIF ============================= */
    footer {
        background: #1f331f;
        color: white;
        padding: 40px 10%;
        text-align: center;
    }

    .footer-container {
        max-width: 1200px;
        margin: 0 auto 30px 180px;
        display: flex;
        justify-content: space-between;     /* Maak dat teks in footer links en regs kan vertoon */
        flex-wrap: wrap;                    /* As nie genoeg spasie - oorgaan na nuwe lyn */
        gap: 30px;
    }

    /* CSS vir die linker en regterkanste blok in voetskrif */
    .footer-left,
    .footer-right {
        flex: 1;
        min-width: 200px;
        text-align: left;
    }

    /* CSS vir linker en regterkanste teks in voetskrif */
    .footer-left p,
    .footer-right p {
        margin: 8px 0;
        font-size: 1rem;
    }

    /* Strong blok element sodat op eie lyn kom */
    .footer-right p strong {
        display: block;
        margin-bottom: 4px;
    }

    .footer-copyright {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);    /* Ligte lyntjie bo die copyright teks */
        font-size: 0.9rem;
    }

/* ============================= AGTERGROND FOTO AFDELING ============================= */
    .bg-section{
        background:url("Media/RotationalGrazing.jpg") center/cover no-repeat;
        color:rgb(238, 238, 238);
        text-align:center;
        position:relative;
    }

    .bg-section::before{
        content:"";
        position:absolute;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.5);
        top:0;
        left:0;
    }

    .bg-teks{
        position:relative;
        max-width:800px;
        margin: auto;
    }

/* ================= OPDEEL (SPLIT) LAYOUT ================= */
    /* Prent 1 kant en teks anderkant, elke 2de div se prent en teks pos ruil */
    .split {
        display: flex;
        align-items: center;
        max-width: 1200px;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 30px;
        
        /* Animasiereëls – moet saam wees sodat nie oorskryf word nie */
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 1.2s ease, transform 1.2s ease;
        will-change: opacity, transform;  /* beter performance */
    }

    .split:nth-child(even) {
        flex-direction: row-reverse;
    }

    /* Maak sigbaar */
    .split.show {
        opacity: 1;
        transform: translateY(0);
    }

    /* Prent wat binne houer is */
    .split img {
        width: 100%;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* Houer vir die prent en teks */
    .split-text,
    .split-image {
        flex: 1;
        min-width: 300px;
    }

/* ============================= SPESIALE INLEIDING (Op tabel blaaie) ============================= */
    /* Hoof box vir bladsy se inhoud */
    .content-houer {
        max-width: 1400px;
        margin: 0 auto;
        padding: 3rem 1.5rem;
    }

    /* Net op content container se h2 stel */
    .content-houer h2 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #065f46;
        margin-bottom: 1.5rem;
        text-align: left;          /* Of center, afhangende van jou voorkoms */
    }

    /* Sodat nie n hero het soos tuisblad se intro nie */
    .section-intro,
    .page-intro {
        font-size: 1.3rem;          /* effens groter vir beter leesbaarheid */
        font-weight: 500;           /* medium vet – lyk meer professioneel */
        color: #4b5563;             /* hou die sagte grys */
        /* max-width: 1200px;           hou dit nie te wyd nie */
        line-height: 1.7;           /* beter leesbaarheid */
        text-align: left;
    } 

/* ============================= TOP VERKOPE PREVIEW (PRODUCTS) ============================= */
    /* Verwyder boonste spasie wat van 'n ouerelement af kom */
    .top-verkope-preview {
        padding-top: 0;
    }

    .top-products-cards {
        display: flex;
        gap: 2rem;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        margin: 1.5rem 0;
    }

    .top-product-card {
        width: 280px;
        border-radius: 12px;
        overflow: hidden;
        background: #f4f4f4;
        box-shadow: 0 4px 15px rgba(0,0,0,0.25);
        transition: all 0.35s ease-in-out;
    }

    .top-product-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease-in-out;
    }

    .top-product-card:hover {
        transform: scale(1.1);
    }

    .top-product-card:hover img {
        transform: scale(1.0);
    }

    .top-product-card-body {
        padding: 1rem 1.1rem 1.2rem;
    }

    .top-product-rank {
        display: inline-block;
        font-weight: 700;
        color: #065f46;
        margin-bottom: 0.35rem;
    }

    .top-product-name {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #111827;
    }

    .top-product-qty {
        margin: 0.5rem 0 0;
        color: #065f46;
        font-weight: 600;
    }

    .top-products-link {
        color: #065f46;
        font-weight: 600;
        text-decoration: none;
    }

    .top-products-link:hover {
        text-decoration: underline;
    }

/* ============================= Tabelle ============================= */
    table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        border-radius: 8px;
        overflow: hidden;
        margin: 1.5rem 0;
    }

    thead {
        background: #065f46;
        color: white;
    }

    th, td {
        padding: 1.25rem 1.5rem;
        text-align: left;
    }

    th {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.95rem;
        letter-spacing: 0.5px;
    }

    td {
        border-bottom: 1px solid #e5e7eb;
    }

    tr:last-child td {
        border-bottom: none;
    }

/* PRYS KOLOM */
    .price {
            font-weight: 700;
            color: #065f46;
            text-align: right;
        }

/* WAARSKUWING - LAE VOORRAAD */
    /* (Aanpas sodat hele ry rooi is - rooi teks / ligte rooi verkleur) */
    .low-stock-row {
        background-color: #ffe8e8;
    }

    .low-stock-emphasis {
        color: #dc2626;
        font-weight: 700;
    }

    .status-low { 
        color: #dc2626; 
        font-weight: bold; 
    }

/* ============================= SOEKVELD EN BYSIT (VOORRAADTABEL) ============================= */
    .controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1.2rem;
        width: 50%; /* Soekbalk breedte stel */
    }

    /* Styl vir alle invoer teks */
    input[type="text"] {
        padding: 0.8rem 1.4rem;
        border: 1px solid #d1d5db;
        border-radius: 50%;
        width: 340px;
        font-size: 1rem;
    }

    /* Bysit / Invoeg (Nuwe item) knoppie */
    button.add-btn {
            background: #065f46;
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 505;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }

    button.add-btn:hover {
            background: #047857;
    }

/* ============================= TUISBLAD INLEIDING ============================= */
    .intro {
        background: url("Media/1Plaas.jpg") center/cover no-repeat;
        text-align: center;
        padding: 140px 20px;
        color: rgb(238, 238, 238);

        /* Belangrik vir die ::before overlay */
        position: relative;
    }

    .intro p {
        max-width: 800px;
        margin: 15px auto 0;
        font-size: 1.2rem;
        line-height: 1.7;

        position: relative;         /* of z-index: 1; */
        z-index: 1;
    }

    /* Gebruik om swart overlay oor hero prent te plaas */
    .intro::before {
        content: "";
        position: absolute;
        inset: 0;               /* shorthand vir top:0; right:0; bottom:0; left:0; */
        background: rgba(0, 0, 0, 0.6);
        z-index: 0;             /* onder die teks-inhoud */
    }

/* ============================= GALERY (CAROUSEL) ============================= */
    /* Houer vir galery se inhoud */
    .gallery {
        position: relative;
        max-width: 100%;
        max-height: 600px;
        margin: 0 auto 40px;
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    }

    /* Individuele houer vir elke prent */
    .slide 
    { 
        display: none; 
    }
    
    .slide.active 
    { 
        display: block; 
    }

    /* Prent wat binne skyfie houer is */
    .slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

/* Pyltjies om deur prente te navigeer */
    .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.5);
        color: white;
        border: none;
        font-size: 2rem;
        padding: 12px 18px;
        cursor: pointer;
        border-radius: 50%;
        z-index: 10;    /* Hoer z waarde - bo op laer elemente op selfde pos */
    }

    .left  { left: 20px; }
    .right { right: 20px; }

/* Kolletjies vir onder gallery - ekstra navigasie */
    .dots {
        text-align: center;
        margin-top: 15px;
    }

    .dot {
        height: 14px;
        width: 14px;
        margin: 0 8px;
        background-color: transparent;
        border: 2px solid #4CAF50;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .dot.active {
        background-color: #4CAF50;
    }

/* ============================= HANDELSMERK (LOGO) BLOK ============================= */
    .logo-blok {
        background: #2f4f2f;
        color: white;
        text-align: center;
        padding: 60px 20px 20px;
        position: relative;
        margin: 100px auto 60px;
        max-width: 900px;
        border-radius: 25px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }

    .logo-sirkel {
        width: 140px;
        height: 140px;
        background: white url("Media/Logo.jpg") center/cover no-repeat;
        border-radius: 50%; /* maak sirkel */
        position: absolute;
        top: -70px;     /* Skuif 70px op */
        left: 50%;      /* Linkerkant v. elemet in middel v. ouer element vertikaal */
        transform: translateX(-50%);
        border: 5px solid #4CAF50;
        /*          Horisontale skyf , Vertikale skyf , Blur raduis */
                                        /*  deursigtigheid is 30% */
        box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    }

    .logo-blok p {
        font-size: 1.3rem;
        font-style: italic;
        max-width: 700px;
        margin: 0 auto 30px;
    }

/* ============================= STIPPEL HORISONTALE LYN ============================= */
    .hr-afdeling-titel{
        text-align:center;
        max-width:100%;
        margin:auto;
    }

    .hr-afdeling-titel hr{
        width:98%;
        margin:15px auto;   /* Bo en onder 15, links en regs outomaties */
        border:2px dotted #4CAF50;
    }

    .afdeling-titel-blok {
        border: 5px dotted #4CAF50;
        margin: auto;
        max-width: 1000px;
        padding-top: 25px;
        border-radius: 15px;
    }

    .afdeling-titel-blok p {
        max-width: 900px;
        margin: 0 auto 5px auto;
        line-height: 1.7;
    }

    .afdeling-titel-blok ul, li {
        max-width: 900px;
        margin: 0 auto 10px auto;
        line-height: 1.7;
    }

/* ============================= PRENT + TEKS BOX ONDER ============================= */
    .prent-boks{
        display:flex;
        gap:40px;
        align-items:center;
        flex-wrap:wrap;     /* As nie genoeg spasie gaan oor na volgende lyn */
    }

    .prent-boks img{
        width:100%;
        border-radius:20px;
    }

    .text-box{
        background:#193d1a;
        padding:25px;
        border-radius: 12px;
        box-shadow:0 3px 8px rgba(0,0,0,0.1);
        margin-top:-65px;       /* Beweeg element opwaarts, voeg nie spasie by */
        position:relative;
        color: rgb(238, 238, 238);
        width:100%;
    }

/* ============================= KOLPUNTLYSTE (BULLETS) ============================= */
/* --------------- GENOMMERDE --------------- */
    /* Rooster houer met outomatiese kolomme */
    .nommer-lys{
        display:grid;   
        /* Herhaal patroon, kolomme outomaties beskikbare spasie ful, min grootte kolom */ 
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
        gap:30px;
        margin-left: 200px;
        margin-right: 140px;

        text-align: left;
        margin-top: 20px;

        color: #bccbbc;
    }

    .nommer-lys h3 {
        color: #ecf3ec;
    }

    /* Elke item kry ikoon bullet links */
    .nommer-item{
        display:flex;
        gap:15px;
        border-radius: 35px;
        background-color: rgba(32, 60, 34, 0.5);
        padding: 20px 30px 30px 40px;
        box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.3);
    }

    .nommer-ikoon{
        width:40px;
        height:40px;
        background:#3f8242;
        color: #b9cab9;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:bold;
    }

/* --------------- REGMERKIE (ondermekaar) --------------- */
    /* Houer vir regmerkie ikoon lys */
    .regmerkie-lys{
        max-width:1000px;
        margin:40px auto;
    }

    /* Styl die regmerkie lys */
    .regmerkie-item{
        display:flex;
        gap:15px;
        margin-bottom:20px;
    }

    .regmerkie-ikoon{
        width: 35px;
        height: 35px;
        border-radius:50%;
        background:#4CAF50;
        color:white;
        display:flex;
        align-items:center;
        justify-content:center;
    }

/* --------------- REGMERKIE ROOSTER (langsmekaar) --------------- */
    /* Houer vir regmerkie ikoon lys */
    .rooster-regmerkie-lys{
        max-width:90%;
        margin:40px auto;
        gap: 30px;
        display: grid;
        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    }

    /* Styl die regmerkie lys */
    .rooster-regmerkie-item{
        display:flex;
        gap: 15px;
    }

    .rooster-regmerkie-ikoon{
        width:40px;
        height:40px;
        background:#4CAF50;
        color: white;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:bold;
    }
/* --------------- DEFINISIE LYS --------------- */
    .waardes-definisie {
        margin: 25px 0;
        font-size: 1.05rem;
    }

    .waardes-definisie dt {
        font-weight: 700;
        color: #065f46;
        margin-top: 1.2rem;
        font-size: 1.15rem;
        position: relative;
        padding-left: 28px;
    }

    .waardes-definisie dt::before {
        content: "►";
        position: absolute;
        left: 0;
        color: #4CAF50;
    }

    .waardes-definisie dd {
        margin-left: 28px;
        line-height: 1.6;
        color: #444;
    }

/* ============================= BOERDERY ROOSTER ============================= */
    /* Binne blok / Rooster - normale kolpunte */
    /* Rooster met 2 kolomme */
    .boerdery-rooster {
        display: grid;
        grid-template-columns: repeat(2, 1fr);   /* 2 gelyke kolomme */
        gap: 30px;                               /* spasie tussen blokke – pas aan soos jy wil */
        padding: 20px;                           /* opsioneel – gee asem rondom */
        max-width: 1200px;                       /* beperk breedte vir groot skerms */
        margin: 0 auto;                          /* sentreer */
    }

    /* Kies alle elemente wat klas 'boerdery-rooster' het en slegs direkte direkte kinders ,asook div element is */
    .boerdery-rooster > div {
        background: #d4f2d6;                     /* ligte agtergrond vir kontras – opsioneel */
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 6px 14px rgba(0,0,0,0.25); /* effense skadu vir diepte */
        border: 10px solid #c8eccb;               /* subtiele rand – opsioneel */
    }

    /* Styl van H2 binne blok van die rooster (grid) */
    .boerdery-rooster h2 {
        margin-top: 0;
        color: #065f46;                          
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .boerdery-rooster ul {
        list-style: disc;
        padding-left: 25px;
        margin: 0;
    }

    .boerdery-rooster li {
        margin-bottom: 10px;
        font-size: 1.05rem;
    }

/* ============================= TUISBLAD PRODUKTE PRENTE ============================= */
    /* Houer vir al 3 prente */
    .produk-prent {
    margin: 20px auto;
    width: 80%;
    max-width: 400px;         
    display: inline-block;    /* Laat hulle langs mekaar as daar spasie is */
    vertical-align: top;
    }

    /* Elke individuele prent binne die houer */
    .produk-prent img {
        width: 100%;
        height: auto;
        border-radius: 12px;
        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
        transition: transform 0.3s ease;
    }

    .produk-prent:hover img {
        transform: scale(1.05);   /* Ligte zoom op hover */
    }

/* ============================= GESKIEDENIS PRENT ============================= */
    .center-prent {
        display: block;     /* Beelde standaard inlyn - verander na blok */
        margin: 0 auto;
        /* Gestelde breedte vir beter beheer */
        width: 90%;
        height: auto;
        border-radius: 25px;    /* Geronde rand */
    }

/* ============================= BLOKAANHALING ============================= */
    blockquote {
        font-size: 1.3rem;
        font-style: italic;
        color: #4b5563;
        padding: 20px 40px;
        border-left: 5px solid #4CAF50;
        background: #e0f7e1;
        margin: 30px 0;
        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    }

/* ============================= KLEIN GALERY ============================= */
    /* Ons trop se verdeel (split) teks en gallery - skaap rasse */
    /* Ovaal skyfie galery houer */
    .mini-gallery {
        position: relative;
        width: 100%;
        max-width: 380px;                /* maksimum breedte van die hele gallery */
        margin: auto;
        overflow: hidden;
        border-radius: 50%;              /* maak die hele gallery 'n sirkel */
        box-shadow: 0 6px 16px rgba(0,0,0,0.2);
        height: 250px;                   /* maak laer as breedte - sodat ovaal */
        background: #f0f0f0;           /* ligte agtergrond as prent nie vul nie */
    }

    /* Versteek alle skyfies */
    .mini-slide {
        display: none;
        width: 100%;
        height: 100%;
    }

    /* Prente vul die ovaal perfek, gesentreer en geknip */
    .mini-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;             /* sny om te pas, hou proporsies */
        object-position: center;
        display: block;
    }

    /* Huidige skyfie */
    .mini-active {
        display: block;
    }

/* Pyltjies (hou styl - maak seker binne sirkel bly) */
    .mini-gallery .mini-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);    /* Sentreer vertikaal */
        width: 48px;
        height: 48px;
        background-color: rgba(76, 175, 80, 0.7);
        color: white;
        border: none;
        font-size: 26px;
        cursor: pointer;
        border-radius: 50%;
        z-index: 20;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    }

    /* Voorkoms van pyltjies as muis bo-oor beweeg (hover) */
    .mini-gallery .mini-arrow:hover {
        background-color: rgba(76, 175, 80, 1);
        transform: translateY(-50%) scale(1.12);
    }

    /* Inlynstellings vir pyle - regte posisies binne galery houer sit  */
    .mini-gallery .mini-left {
        left: 10px;
    }

    .mini-gallery .mini-right {
        right: 10px;
    }

/* ============================= PRODUKTE GALERY (CAROUSEL) ============================= */
    /* Vertoon 3 prente op 'n slag - huidige prent middel en groter - vorige en volgende 'agterntoe' en ligter */

    /* Houer vir 3 prent galery */
    .produk-carousel-container {
        position: relative;           
        margin: 5px auto;
        max-width: 1200px;
        height: 350px;
        overflow: hidden;
        padding-top: 50px;       
    }  

    /* Animasie vir die items */
    .produk-carousel {
        display: flex;
        transition: transform 0.6s ease-in-out;
        gap: 40px;
        justify-content: center;
        align-items: center;
    }

    /* Houer vir elke prent individueel */
    .carousel-item {
        width: 300px;
        height: 200px;
        border-radius: 12px;
        overflow: hidden;              
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        transition: all 0.6s ease-in-out;
        flex-shrink: 0;
    }

    /* Prent van die individuele prent houers */
    .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.6s ease-in-out;   
        opacity: 0.7;
    }

    /* Middelste prent houer */
    .carousel-item.center {
        width: 350px;
        height: 225px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        transform: scale(1.15);         
        z-index: 2;     /* Pos van middelste prent (1   2   3) */
    }

    /* Middelste prent */
    .carousel-item.center img {
        opacity: 1;
        transform: scale(1.15);          /* Skaal middleste prent - groter as 2 kant prente */
    }

/* Pyltjies */
    .carousel-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0,0,0,0.5);
        color: white;
        border: none;
        font-size: 40px;
        padding: 12px 18px;
        cursor: pointer;
        border-radius: 50%;
        z-index: 10;
        transition: background 0.3s;
    }

    /* Voorkoms as muis bo-oor pyle beweeg */
    .carousel-arrow:hover {
        background: rgba(0,0,0,0.8);
    }

    /* Inlynstellings vir pyle - regte posisies binne galery houer sit  */
    .left-arrow { 
        left: 10px; 
    }
    
    .right-arrow { 
        right: 10px; 
    }

/* ============================= WEBVORMS ============================= */
    /* Houer vir hele form - alles is binne hierdie houer */
    .form-container {
        max-width: 600px;
        margin: 0 auto;
        padding: 3rem 2rem;
        background: white;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    }

    .form-container h2 {
        text-align: center;
        color: #065f46;          
        font-size: 2.5rem;
        margin-bottom: 2.5rem;
        font-weight: 700;
    }

    /* Groep om velde en etikete saam te hou */
    .form-group {
        margin-bottom: 1.8rem;
    }

    /* Alle label elemente binne die groep klas */
    .form-group label {
        display: block;
        margin-bottom: 0.6rem;
        color: #374151;
        font-weight: 500;
    }


    /* Stel uniforme styl vir verskeie elemente (text,email,number,select,textarea) */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        width: 100%;
        padding: 1rem 1.2rem;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        font-size: 1rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    /* Wat gebeur as gebruiker op (imput,textarea,select) kliek of oor beweeg (hover) */
    input:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: #065f46;
        box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1);
    }

    textarea {
        resize: vertical;
        min-height: 140px;
    }

    /* Date input styl soos jou ander velde */
    input[type="date"] {
        width: 100%;
        padding: 1rem 1.2rem;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        font-size: 1rem;
        background: white;
        color: #374151;
    }

    input[type="date"]:focus {
        outline: none;
        border-color: #065f46;
        box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1);
    }

    /* Versteek die default spinner */
    input[type="date"]::-webkit-inner-spin-button,
    input[type="date"]::-webkit-calendar-picker-indicator {
        opacity: 0.6;   /* maak dit effens sigbaar maar nie te dominant nie */
        filter: brightness(0.8); /* Verminder helderheid met 80% */
    }

    /* Klein hack vir beter voorkoms op sommige browsers */
    input[type="date"]::before {
        content: attr(placeholder);
        color: #9ca3af;
    }

    /* Dinamiese produk rye */
    .product-row {
        display: flex;
        gap: 12px;
        margin-bottom: 1rem;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .product-select-wrap {
        flex: 3;
        min-width: 220px;
    }

    .quantity-wrap {
        flex: 1;
        min-width: 120px;
    }

    .product-select,
    .quantity-input {
        width: 100%;
        padding: 1rem 1.2rem;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        font-size: 1rem;
    }

    .add-btn {
        background: #065f46;
        color: white;
        border: none;
        padding: 0.8rem 1.5rem;
        border-radius: 12px;
        cursor: pointer;
        font-weight: 600;
        margin-top: -2px;
    }

    .add-btn:hover {
        background: #047857;
    }

    .remove-product-btn {
        background: #dc2626;
        color: white;
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 1.2rem;
        line-height: 1;
        cursor: pointer;
        margin-top: 2.2rem; /* pas by input hoogte */
    }

    .remove-product-btn:hover {
        background: #b91c1c;
    }

    /* Print-only produk hoeveelheid rooster */
    .print-product-matrix {
        display: none;
    }

    /* Checkbox knoppie */
    .checkbox-group label {
        display: flex;
        align-items: center;   /* beter as flex-start vir 1 lyn */
        gap: 8px;
        line-height: 1.4;
        cursor: pointer;
        margin-top: 7px;
    }

    /* BAIE BELANGRIK */
    .checkbox-group input[type="checkbox"] {
        width: auto;           /* override die 100% */
        flex-shrink: 0;        /* keer dat dit rek */
        margin: 0;
        transform: scale(1.1);
        accent-color: #065f46;
    }


    /* Knoppie om vorm te stuur (Plaas bestelling / Stuur boodskap) */
    .submit-btn {
        width: 100%;
        background: #065f46;
        color: white;
        border: none;
        padding: 1.1rem;
        border-radius: 12px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }

    /* Voorkoms as bo-oor knoppie met muis beweeg */
    .submit-btn:hover {
        background: #047857;
    }

/* ============================= LIGGING KAART ============================= */
    .location-map-section {
        padding-top: 0;
    }

    .location-map-card {
        max-width: 900px;
        margin: 0 auto;
        background: #ffffff;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        padding: 2rem;
    }

    .location-map-card h2 {
        text-align: center;
        color: #065f46;
        margin-bottom: 0.8rem;
    }

    .location-map-card p {
        text-align: center;
        color: #4b5563;
        margin-bottom: 1.3rem;
    }

    .location-map-frame {
        overflow: hidden;
        border-radius: 14px;
        border: 1px solid #e5e7eb;
    }

    .map-link {
        display: inline-block;
        margin-top: 1rem;
        color: #065f46;
        font-weight: 600;
        text-decoration: none;
    }

    .map-link:hover {
        text-decoration: underline;
        color: #047857;
    }

/* ============================= PLAASKALENDER ============================= */
    .calendar-section {
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    }

    .calendar-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        margin: 1.5rem 0;
    }

    .calendar-toolbar h3 {
        color: #065f46;
        font-size: 1.4rem;
        text-align: center;
        flex: 1;
    }

    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(42px, 1fr));
        gap: 0.45rem;
    }

    .calendar-weekdays span {
        background: #065f46;
        color: white;
        padding: 0.65rem;
        border-radius: 10px;
        text-align: center;
        font-weight: 700;
    }

    .calendar-day {
        min-height: 82px;
        border: 1px solid #d1d5db;
        border-radius: 12px;
        background: #f9fafb;
        padding: 0.55rem;
        text-align: left;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .calendar-day:hover,
    .calendar-day:focus {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px rgba(0,0,0,0.12);
        outline: 2px solid #0f766e;
    }

    .calendar-day.empty {
        background: transparent;
        border: none;
        cursor: default;
        box-shadow: none;
    }

    .calendar-day.no-event {
        background: #f1f3f7;
        border-color: #d1d5db;
        color: #6b7280;
    }

    .calendar-day.has-event {
        background: #dcfce7;
        border: 2px solid #16a34a;
    }

    .calendar-day.today {
        border: 2px solid #f59e0b;
    }

    .calendar-day.selected {
        background: #065f46;
        color: white;
    }

    .calendar-date-number {
        font-weight: 700;
        display: block;
        margin-bottom: 0.3rem;
    }

    .calendar-event-dot {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #16a34a;
        margin-right: 0.25rem;
    }

    .calendar-day.selected .calendar-event-dot {
        background: #bbf7d0;
    }

    .calendar-events {
        margin-top: 1rem;
        padding: 1rem;
        background: #f0fdf4;
        border-left: 5px solid #16a34a;
        border-radius: 12px;
        line-height: 1.7;
    }

    .calendar-events ul {
        margin-left: 1.2rem;
    }

    @media (max-width: 600px) {
        .calendar-grid {
            gap: 0.25rem;
        }

        .calendar-day {
            min-height: 58px;
            padding: 0.35rem;
            font-size: 0.8rem;
        }

        .calendar-weekdays span {
            padding: 0.45rem 0.25rem;
            font-size: 0.8rem;
        }
    }

/* ============================= CSS FILTER - logo en prente ============================= */
    .logo-img, .split img, .carousel-item img {
        filter: brightness(1.05) contrast(1.1);   /* ligte verbetering */
    }

/* ============================= KEYFRAME ANIMASIE ============================= */
    /* Klein pulse animasie op koppies hover */
    .cta button,
    .submit-btn {
        transition: all 0.9s ease;
        
    }

    .cta button:hover,
    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(6, 95, 70, 0.35);
        animation: pulse 1.7s infinite ease-in-out;
    }

    /* Pulse animasie */
    @keyframes pulse {
        0%, 100% {
            transform: translateY(-2px) scale(1);
        }
        50% {
            transform: translateY(-2px) scale(1.06);
        }
    }

/* ---------------------------------------------------------------------------------
   ============================== RESPONSIEWE ONTWERP ==============================
   --------------------------------- 3 Kermgroottes --------------------------------
                    Tablet                    - tussen 480px en 768px
                    Klein laptop & Tablet     - tussen 768px en 1024px
                    Slimfone                  - tussen 360px en 480px
   --------------------------------------------------------------------------------- */

/* Globale styl vir prente en navigasielys op kleiner skerms */
    /* Prente */
    img {
        max-width: 100%;       /* Beelde nie wyer as houer nie */
        height: auto;         
        display: block;       /* Verwyder ekstra spasie onder beelde */
    }

    /* Hamburger menu ikoon knoppie (3 strepie vir op mobiel) */
    .menu-toggle {
        display: none;                  /* versteek op groot skerms */
        background: none;   /* Agtergrond en grens (border) - nie normale knoppie styl he */
        border: none;
        font-size: 1.4rem;  /* Font / Ikoon grootte */              
        color: #333;
        cursor: pointer;
        padding: 0.2rem;
        margin-left: auto;
    }

/* Tablet skerm (tussen 480 en 768) */
    @media (max-width: 768px) {
    /* Navigasie en menu */
        .menu-toggle {
            display: block;              /* wys nou die hamburger */ 
        }

        /* Versteek totdat burger menu oopgemaak word */
        .nav {
            position: absolute;
            top: 100%;                  /* reg onder die header */
            left: 0;
            width: 100%;
            background: white;
            max-height: 0;              /* begin toegevou */
            overflow: hidden;
            overflow-x: hidden;         /* keer dat skakels horisontaal uitdruk */
            opacity: 0;
            transition: max-height 0.4s ease, opacity 0.3s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            z-index: 999;
        }

        /* Waneer navigasie aktief / sigbaar is */
        .nav.active {
            max-height: 700px;  /* groot genoeg vir al die skakels */
            opacity: 1;
            overflow-y: auto;   /* Vertikale blaai (scroll) waneer inhoud te veel is vir boks */
        }

        /* Navigasie lys */
        .nav ul {
            flex-direction: column;     /* Maak lys vertikaal (skakels ondermekaar) */
            padding: 0;
            gap: 0;
        }

        /* Binne lys ook blaai (scroll) */
            /* Lys binne klas 'nav-menu' (klas uniek tot kleiner skerms) binne klas 'nav' - virseker dat regte lys aangepas word */
        .nav ul.nav-menu {
            max-height: 100%;
            overflow-y: auto;
        }

        /* Elke hoof menu item */
        .nav-menu {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-left: 0px;
            margin-right: 2px;
            padding: 0;
        }

        /* (>) - Teiken (target) slegs direkte lys (li) items binne die 'nav-menu' klas */
        .nav-menu > li {
            width: 100%;
        }

        /* Eerste (>) - Teiken (target) slegs direkte lys (li) items binne die 'nav-menu' klas
           Tweede (>) verder 'a' tags (<a>) wat direkte kinders van lys (li) items is maar slegs die 'a' tags met klas 'dropbtn' */
        .nav-menu > li > a.dropbtn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.9rem 1rem;
            font-size: 1.05rem;
            border-bottom: 1px solid #eee;
            color: #333;
            text-decoration: none;
        }

        .dropbtn {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            padding: 0.9rem 1rem;
            font-size: 1.05rem;
            color: #333;
            text-decoration: none;
            border-bottom: 1px solid #eee;
        }

        /* Pyltjie area – groter tik-area, maar net vir oopmaak */
        .dropdown-toggle {
            padding: 0.5rem 0.6rem 0.5rem 1.1rem; /* effens groter area */
            cursor: pointer;
            font-size: 1.1rem;
            transition: transform 0.25s ease;
        }

        /* Wanneer oop – draai pyltjie om (lyk nou so - ^) */
        .dropdown.active .dropdown-toggle {
            transform: rotate(180deg);
        }

        /* Subskakels (Dropdown) inhoud */
        .dropdown-content {
            display: none;          /* forseer toe */
            position: static;
            width: 100%;
            background: #f9fafb;
            margin: 0;
            padding: 0.4rem 0;
            overflow: hidden;                  /* ekstra veiligheid */
        }

        /* Slegs wanneer die parent (.dropdown) '.active' is, wys dit */
        .dropdown.active .dropdown-content {
            display: block;         /* forceer oop */
        }

        /* As jy sub-items het, maak seker hulle bly binne */
        .dropdown-content li,
        .dropdown-content a {
            display: block;                    /* hulle mag binne sigbaar wees */
        }

        /* Elke sub-link: ingekeep van links */
        .dropdown-content a {
            display: block;
            padding: 0.85rem 1.2rem 0.85rem 2.4rem;  /* links meer ingeduik */
            color: #444;
            font-size: 0.98rem;
            border-bottom: 1px solid #f0f0f0;
        }

        .dropdown-content a:last-child {
            border-bottom: none;
        }

        .dropdown-content a:hover,
        .dropdown-content a:active {
            background: #e8f5e9;
            color: #2e7d32;
        }

        /* Op touch-skerms kan :hover "vassit" en links buite skerm vergroot */
        nav a:hover {
            transform: none;
        }

        /* Maak seker die hele nav-houer bly netjies (logo en knoppie regs bly) */
        .nav-houer {
            position: relative;
            justify-content: space-between;
            padding: 0 1rem;
        }

    /* Logo en Logo teks in nav langsmekaar vertoon */
        .logo-area {
            margin-left: -10px;
            display: table;
            width: 280px;
            margin-top: 4px;
            margin-bottom: 4px;
            > span {
                display: table-cell;
                white-space: wrap;
            }

            .logo-img {
                justify-content: left;
                max-width: 44px;
                max-height: 44px;
                margin-right: 0%;
                padding-right: 0%;
            }
        }

        .logo-teks {
            top: -2px;
            bottom: 2px;
            float: left;
            position: relative; 
            margin-left: 0%;
            padding-left: 5px;
            vertical-align: middle;
        }

        .logo-teks h1 {
            font-size: 1.2rem;              /* effens kleiner */
        }

        .logo-teks p {
            font-size: 0.8rem;
        }

    /* Hero */
        .hero {
            background-size: cover;     /* Bedek hele skerm */
            min-height: 50vh;           /* Kleiner hoogte op mobiel */
        }

        .hero-teks h1 {
            font-size: 2rem;            /* Kleiner opskrif */
        }

        .hero-teks p {
            font-size: 1rem;            /* Kleiner teks */
        }

    /* Sections en inhoud */
        section {
            padding: 20px 5%;           /* Kleiner padding */
        }

        .content-houer {
            padding: 1rem;              /* Kleiner padding */
        }

    /* Tabelle responsief maak (scrollbaar) */
        table {
            display: block;             /* Maak tabel blok */
            overflow-x: auto;           /* Horisontale scroll as nodig */
            white-space: nowrap;        /* Voorkom lynbreking */
        }

    /* Vorms */
        .form-container {
        padding: 1.5rem 1rem;  /* Nog effens kleiner */
        }

        /* Invoervelde full-width en groter vir tik */
        input[type="text"], input[type="email"], input[type="tel"], select, textarea {
            width: 100%;           /* Volle breedte */
            min-height: 48px;      /* Groter vir vingers */
            padding: 0.8rem 1rem;
            font-size: 1rem;       /* Groter teks vir leesbaarheid */
            margin-bottom: 1rem;
        }

        label {
            font-size: 0.95rem;    /* Kleiner labels om spasie te spaar */
            margin-bottom: 0.5rem;
        }

        .submit-btn {
            min-height: 50px;      /* Groter knoppie vir tik */
            font-size: 1.05rem;
            padding: 1rem;
        }

        /* Vir products.html se bestel-vorm – spesifiek */
        .order-form {
            flex-direction: column;  /* Vertikaal op mobiel as dit flex is */
        }

    /* Hoof en Mini galery */
        .slideshow-container {
            max-width: 100%;            /* Volle breedte */
        }

        .slide img {
            height: auto;               /* Pas hoogte aan */
        }

        .mini-gallery {
            max-width: 100%;            /* Volle breedte */
        }

    /* Produkte carousel galery */
        .produk-carousel {
            transition: transform 0.6s ease-in-out;
        }
    
        .carousel-item.center {
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.5);
            transform: none;
        }

    /* Voetskrif */
        .footer-container {      
            flex-direction: row;
            flex-wrap: nowrap;  
            align-items: flex-start;
            gap: 100px;                       
            margin: auto -5px;   /* Sodat linker deel nie regter deel squish */
            max-width: 758px;
        }

        .footer-left,
        .footer-right {
            flex: 1;
            min-width: 0;
            width: 300px;
        }

        .footer-left p{
            border-right: -50px;
        }

    /* Boerdery rooster */
        .boerdery-rooster {
            grid-template-columns: repeat(1, 1fr); 
        }

    /* Regmerkie kolpunt */
        .regmerkie-lys{
            max-width:758px;
            margin:20px auto;
        }

        .regmerkie-ikoon {
            font-size: 15px;
            padding: 10px;
            width: 28px;
            height: 28px;
            font-weight: bold;
        }

    /* Regmerkie rooster */
        .rooster-regmerkie-lys{
            max-width:100%;
            margin:40px -15px;
            gap: 20px;
        }

    /* Produksie se kolpunte */
    .afdeling-titel-blok ul, li {
        max-width: 900px;
        margin: 0 5px 10px 15px;
        line-height: 1.7;
    }

    /* Horisontale lyn blok afdeling - tuisblad */
        .afdeling-titel-blok p{
            margin: 0 15px;
            text-align: center;
        }

    /* Pas nommer kolpunte aan sodat hulle pas by die skerm pas */
        .nommer-lys {
            margin-left: -30px !important;
            margin-right: -30px !important;
            padding: 0 10px;
            gap: 12px !important;
        }

        .nommer-item {
            padding: 15px 15px;
            gap: 12px;
        }

        .nommer-ikoon {
            width: 34px;
            height: 34px;
            font-size: 1.1rem;
        }
    }

/* ==================== KLEIN LAPTOP & TABLET (768px - 1024px) ==================== */
    @media (min-width: 769px) and (max-width: 1024px) {

        /* Hoof houers - maak hulle nie wyer as die skerm nie */
        .content-houer,
        section,
        .afdeling,
        .afdeling-2,
        .afdeling-3,
        .bg-section {
            padding-left: 5% !important;
            padding-right: 5% !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        /* Split sections (prent + teks) */
        .split {
            gap: 25px;
            padding: 0 5%;
        }

        .split-text,
        .split-image {
            min-width: auto !important;
        }

        /* Nommer-lys (Volhoubare Toekoms) - baie belangrik! */
        .nommer-lys {
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding: 0 5%;
            gap: 25px;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
        }

        .nommer-item {
            padding: 20px;
        }

        /* Logo-blok (die groen blokke met sirkel) */
        .logo-blok {
            margin: 60px 5% !important;
            max-width: 100% !important;
            padding: 50px 30px 30px;
        }

        /* Tabelle */
        table {
            font-size: 0.95rem;
        }

        th, td {
            padding: 14px 12px !important;
        }

        /* Hero teks */
        .hero-teks h1 {
            font-size: 2.8rem;
        }

        .hero-teks p {
            font-size: 1.1rem;
        }

        /* Voetskrif - hou dit mooi */
        .footer-container {
            gap: 90px;
            margin: 0 auto;
            padding: 0 5%;
            max-width: 1024px;
        }

        /* Algemene prente en galerye */
        img {
            max-width: 100% !important;
            height: auto !important;
        }

        .gallery,
        .produk-carousel-container {
            max-width: 100% !important;
        }

        /* Vorms */
        .form-container {
            padding: 2rem 5% !important;
        }

        /* Produksie se kolpunte */
        .afdeling-titel-blok ul, li {
            max-width: 900px;
            margin: 0 5px 10px 15px;
            line-height: 1.7;
        }
    }

/* Slimfone skerm (tussen 350 en 480) */
    @media (min-width: 350px) and (max-width: 480px) {
        .menu-toggle {
            font-size: 1.6rem;
        }

        /* Op touch-skerms kan :hover "vassit" en links buite skerm vergroot */
        nav a:hover {
            transform: none;
        }
        
        .nav {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        /* Logo en Logo teks in nav langsmekaar vertoon */
        .logo-area {
            margin-left: -10px;
            display: table;
            width: 280px;
            > span {
                display: table-cell;
                white-space: wrap;
            }

            .logo-img {
                justify-content: left;
                max-width: 44px;
                min-height: 44px;
                margin-right: 0%;
                padding-right: 0%;
            }
        }

        .logo-teks {
            top: -6px;
            bottom: 2px;
            float: left;
            position: relative; 
            margin-left: 0%;
            margin-left: -20px;
        }

        .logo-teks h1 {
            font-size: 1.1rem;              /* effens kleiner */
        }

        .logo-teks p {
            font-size: 0.7rem;
        }

        .nav {
            gap: 0.6rem;                /* Nog minder spasie */
        }

        h1, h2 {
            font-size: 1.5rem;          /* Baie klein opskrifte */
        }

        .submit-btn {
            padding: 0.8rem;            /* Kleiner knoppie */
        }

        /* Carousel aanpas (as jy dit het) */
        .carousel-item {
            width: 100%;                /* Volle breedte per item */
        }
    
        .carousel-item.center {
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.2);
            transform: none;
        }

        /* Video skakel */
        #videoEndLogo .logo-blok {
            background: transparent;
            box-shadow: none;
            margin: 0;
            padding: 0;
            max-width: 100%;
            border-radius: 0;
        }

        #videoEndLogo .logo-sirkel,
        #videoEndLogo .logo-blok p {
            display: none;
        }

        #videoEndLogo .cta button {
            transform: translateY(-55%);
            font-size: 10px;
            padding: 0.5rem 0.8rem;
            border-radius: 10px;
        }

        /* Verwyder keyframe */
        .cta button,
        .submit-btn {
            transition: none;
            animation: none;
        }
        
        .cta button:hover,
        .submit-btn:hover{
            transform: none;
            transition: none;
        }

        /* Terug na bo knoppie  */
        #topBtn{
            align-items: safe;
            align-self: safe;
        }

        /* Footer */
        .footer-container{
            margin: auto;
            align-items: left;
        }
    }

/* ============================= PRINT ============================= */
@media print {
    .logo-img, .split img {
        filter: grayscale(0.2) brightness(1.1);   /* baie ligte grys + helderheid */
    }
}