/* =========================================================
   WHY GOLDBITES
   ========================================================= */

section.why-goldbites {
    width: 100% !important;
    min-height: 0 !important;

    padding: 28px 0 !important;

    background: #001b10 !important;

    box-sizing: border-box !important;

    color: #ffffff !important;
}


/* =========================================================
   MAIN ROW
   ========================================================= */

section.why-goldbites .why-goldbites-container {
    width: calc(100% - 40px) !important;
    max-width: 1450px !important;

    margin: 0 auto !important;

    display: grid !important;

    grid-template-columns: 365px minmax(0, 1fr) !important;

    gap: 28px !important;

    align-items: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   LEFT IMAGE
   ========================================================= */

section.why-goldbites .why-image-box {
    position: relative !important;

    width: 100% !important;
    height: 285px !important;

    overflow: hidden !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #002d19 !important;

    border: 1px solid #f4c542 !important;

    border-radius: 10px !important;

    box-shadow:
        0 0 20px rgba(244, 197, 66, 0.15) !important;

    box-sizing: border-box !important;
}


section.why-goldbites .why-image-box img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border: 0 !important;

    border-radius: 9px !important;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

section.why-goldbites .why-right {
    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    box-sizing: border-box !important;
}


/* =========================================================
   HEADING
   ========================================================= */

section.why-goldbites .why-heading {
    width: 100% !important;

    margin: 0 0 22px !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


section.why-goldbites .why-heading span {
    display: block !important;

    margin: 0 0 6px !important;
    padding: 0 !important;

    color: #f4c542 !important;

    font-family: "Inter", Arial, sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    letter-spacing: 4px !important;

    line-height: 1.2 !important;

    text-transform: uppercase !important;
}


section.why-goldbites .why-heading h2 {
    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #f5d76e !important;

    font-family:
        "Playfair Display",
        Georgia,
        serif !important;

    font-size: clamp(32px, 3.2vw, 52px) !important;

    font-weight: 700 !important;

    line-height: 1.05 !important;

    white-space: nowrap !important;
}


/* =========================================================
   FIVE BOXES
   ========================================================= */

section.why-goldbites .why-features {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        repeat(5, minmax(0, 1fr)) !important;

    gap: 9px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   INDIVIDUAL BOX
   ========================================================= */

section.why-goldbites .why-box {
    width: 100% !important;
    min-width: 0 !important;

    height: 101px !important;

    margin: 0 !important;
    padding: 14px 8px !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    text-align: center !important;

    background:
        rgba(0, 38, 22, 0.72) !important;

    border: 1px solid #f4c542 !important;

    border-radius: 9px !important;

    box-sizing: border-box !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease !important;
}


/* =========================================================
   HOVER
   ========================================================= */

section.why-goldbites .why-box:hover {
	transform: translateY(0) !important;

	  /* Slightly brighter background */
	  background:rgba(0, 55, 31, 0.90) !important;

	  /* Golden shine */
	  box-shadow: 0 0 8px rgba(244, 197, 66, 0.35),
	      0 0 18px rgba(244, 197, 66, 0.20),
	      inset 0 0 10px rgba(244, 197, 66, 0.08) !important;

	  border-color: #f4c542 !important;
}


/* =========================================================
   ICON
   ========================================================= */

section.why-goldbites .why-icon {
    width: 25px !important;
    height: 25px !important;

    margin: 0 0 9px !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    color: #f4c542 !important;

    border: 1px solid #f4c542 !important;

    border-radius: 50% !important;

    font-size: 12px !important;

    line-height: 1 !important;

    box-sizing: border-box !important;

    flex-shrink: 0 !important;
}
/* =========================================================
   RESPONSIVE — KEEP SAME UI PROPORTION
   ========================================================= */

@media (max-width: 1100px) {

    section.why-goldbites .why-goldbites-container {
        width: calc(100% - 30px) !important;

        grid-template-columns:
            25% minmax(0, 1fr) !important;

        gap: 12px !important;
    }

    section.why-goldbites .why-image-box {
        height: clamp(180px, 20vw, 285px) !important;
    }

    section.why-goldbites .why-heading h2 {
        font-size: clamp(26px, 3vw, 42px) !important;
    }

    section.why-goldbites .why-box {
        height: clamp(80px, 7vw, 101px) !important;

        padding:
            clamp(8px, 1vw, 14px)
            clamp(4px, 0.7vw, 8px) !important;
    }

    section.why-goldbites .why-icon {
        width: clamp(20px, 2vw, 25px) !important;
        height: clamp(20px, 2vw, 25px) !important;

        margin-bottom:
            clamp(5px, 0.7vw, 9px) !important;
    }

    section.why-goldbites .why-box h3 {
        font-size:
            clamp(8px, 0.85vw, 12px) !important;
    }

    section.why-goldbites .why-box p {
        font-size:
            clamp(6px, 0.6vw, 8px) !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    section.why-goldbites {
        padding: 18px 0 !important;
    }

    section.why-goldbites .why-goldbites-container {

        /*
         * KEEP IMAGE + CONTENT SIDE BY SIDE
         */
        width: calc(100% - 16px) !important;

        grid-template-columns:
            25% minmax(0, 1fr) !important;

        gap: 6px !important;
    }

    section.why-goldbites .why-image-box {
        height: 150px !important;
    }

    section.why-goldbites .why-heading {
        margin-bottom: 9px !important;
    }

    section.why-goldbites .why-heading span {
        font-size: 7px !important;
        letter-spacing: 2px !important;
    }

    section.why-goldbites .why-heading h2 {
        font-size: clamp(17px, 3.8vw, 28px) !important;

        /*
         * Don't wrap the main title
         */
        white-space: nowrap !important;
    }

    /*
     * ALWAYS FIVE BOXES IN ONE ROW
     */
    section.why-goldbites .why-features {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 3px !important;
    }

    section.why-goldbites .why-box {
        height: 72px !important;

        padding: 6px 2px !important;

        border-radius: 6px !important;
    }

    section.why-goldbites .why-icon {
        width: 18px !important;
        height: 18px !important;

        margin-bottom: 4px !important;

        font-size: 8px !important;
    }

    section.why-goldbites .why-box h3 {
        font-size: 6.5px !important;

        margin-bottom: 3px !important;
    }

    section.why-goldbites .why-box p {
        font-size: 4.8px !important;

        line-height: 1.15 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    section.why-goldbites .why-goldbites-container {

        width: calc(100% - 8px) !important;

        grid-template-columns:
            25% minmax(0, 1fr) !important;

        gap: 3px !important;
    }

    section.why-goldbites .why-image-box {
        height: 125px !important;
    }

    section.why-goldbites .why-heading {
        margin-bottom: 5px !important;
    }

    section.why-goldbites .why-heading span {
        font-size: 5.5px !important;
        letter-spacing: 1.5px !important;
    }

    section.why-goldbites .why-heading h2 {
        font-size: 15px !important;

        white-space: nowrap !important;
    }

    /*
     * STILL FIVE BOXES — NO WRAPPING
     */
    section.why-goldbites .why-features {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 2px !important;
    }

    section.why-goldbites .why-box {
        height: 65px !important;

        padding: 4px 1px !important;

        border-radius: 5px !important;
    }

    section.why-goldbites .why-icon {
        width: 15px !important;
        height: 15px !important;

        margin-bottom: 3px !important;

        font-size: 7px !important;
    }

    section.why-goldbites .why-box h3 {
        font-size: 5.5px !important;

        margin-bottom: 2px !important;
    }

    section.why-goldbites .why-box p {
        font-size: 4px !important;
    }
}

/* =========================================================
   BOX TITLE
   ========================================================= */

section.why-goldbites .why-box h3 {
    width: 100% !important;

    margin: 0 0 7px !important;
    padding: 0 !important;

    color: #f4c542 !important;

    font-family:
        "Inter",
        Arial,
        sans-serif !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    line-height: 1.15 !important;

    text-align: center !important;
}


/* =========================================================
   BOX DESCRIPTION
   ========================================================= */

section.why-goldbites .why-box p {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    color: rgba(255, 255, 255, 0.68) !important;

    font-family:
        "Inter",
        Arial,
        sans-serif !important;

    font-size: 8px !important;

    font-weight: 400 !important;

    line-height: 1.3 !important;

    text-align: center !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    section.why-goldbites .why-goldbites-container {
        width: calc(100% - 28px) !important;

        grid-template-columns:
            28% minmax(0, 1fr) !important;

        gap: 16px !important;
    }


    section.why-goldbites .why-image-box {
        height: 220px !important;
    }


    section.why-goldbites .why-heading {
        margin-bottom: 14px !important;
    }


    section.why-goldbites .why-heading h2 {
        font-size: clamp(
            25px,
            3.2vw,
            38px
        ) !important;
    }


    section.why-goldbites .why-box {
        height: 86px !important;

        padding: 9px 4px !important;
    }


    section.why-goldbites .why-icon {
        width: 21px !important;
        height: 21px !important;

        margin-bottom: 6px !important;

        font-size: 10px !important;
    }


    section.why-goldbites .why-box h3 {
        font-size: 9px !important;
    }


    section.why-goldbites .why-box p {
        font-size: 6px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    section.why-goldbites {
        padding: 18px 0 !important;
    }


    section.why-goldbites .why-goldbites-container {
        width: calc(100% - 12px) !important;

        grid-template-columns:
            25% minmax(0, 1fr) !important;

        gap: 7px !important;
    }


    section.why-goldbites .why-image-box {
        height: 170px !important;

        border-radius: 7px !important;
    }


    section.why-goldbites .why-image-box img {
        border-radius: 6px !important;
    }


    section.why-goldbites .why-heading {
        margin-bottom: 8px !important;
    }


    section.why-goldbites .why-heading span {
        margin-bottom: 3px !important;

        font-size: 7px !important;

        letter-spacing: 2px !important;
    }


    section.why-goldbites .why-heading h2 {
        font-size: clamp(
            18px,
            4vw,
            27px
        ) !important;

        white-space: nowrap !important;
    }


    section.why-goldbites .why-features {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 3px !important;
    }


    section.why-goldbites .why-box {
        height: 72px !important;

        padding: 5px 2px !important;

        border-radius: 5px !important;
    }


    section.why-goldbites .why-icon {
        width: 17px !important;
        height: 17px !important;

        margin-bottom: 4px !important;

        font-size: 8px !important;
    }


    section.why-goldbites .why-box h3 {
        margin-bottom: 3px !important;

        font-size: 6px !important;
    }


    section.why-goldbites .why-box p {
        font-size: 4.5px !important;

        line-height: 1.1 !important;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    section.why-goldbites .why-goldbites-container {
        width: calc(100% - 6px) !important;

        grid-template-columns:
            25% minmax(0, 1fr) !important;

        gap: 4px !important;
    }


    section.why-goldbites .why-image-box {
        height: 125px !important;
    }


    section.why-goldbites .why-heading {
        margin-bottom: 5px !important;
    }


    section.why-goldbites .why-heading span {
        font-size: 5px !important;

        letter-spacing: 1.2px !important;
    }


    section.why-goldbites .why-heading h2 {
        font-size: 15px !important;
    }


    section.why-goldbites .why-features {
        gap: 2px !important;
    }


    section.why-goldbites .why-box {
        height: 59px !important;

        padding: 3px 1px !important;
    }


    section.why-goldbites .why-icon {
        width: 14px !important;
        height: 14px !important;

        margin-bottom: 2px !important;

        font-size: 6px !important;
    }


    section.why-goldbites .why-box h3 {
        font-size: 5px !important;

        margin-bottom: 1px !important;
    }


    section.why-goldbites .why-box p {
        font-size: 3.5px !important;
    }
}