implement CateringPackages component and associated styles for catering services page

src/app/catering-services-ontario/CateringPackages.module.css

@@ -1,182 +1,330 @@
+/* ============================================================
+   CATERING PACKAGES — LUXURY SPLIT PANEL
+   ============================================================ */
+
 .packagesSection {
-    padding: 80px 20px;
+    background-color: #080604;
-    background-image: url("/images/about-us/guest-bg.webp");
-    background-size: cover;
-    background-position: center;
     overflow: hidden;
-    color: #fff;
+    padding: 100px 0 0;
 }
 
-.container {
+.sectionHeader {
-    max-width: 1200px;
-    margin: 0 auto;
-}
-
-.header {
     text-align: center;
-    margin-bottom: 60px;
+    padding: 0 30px 80px;
+    position: relative;
+}
+
+.eyebrow {
+    display: inline-flex;
+    align-items: center;
+    gap: 14px;
+    font-size: 11px;
+    letter-spacing: 5px;
+    text-transform: uppercase;
+    color: #c49c5c;
+    font-weight: 700;
+    margin-bottom: 18px;
+}
+
+.eyebrow::before,
+.eyebrow::after {
+    content: '';
+    display: block;
+    width: 40px;
+    height: 1px;
+    background: #c49c5c;
+    opacity: 0.6;
 }
 
 .mainTitle {
     font-family: var(--font-playfair);
-    font-size: 48px;
+    font-size: 58px;
-    color: #fff;
+    font-weight: 400;
-    margin-bottom: 15px;
+    color: #f5e6d3;
-}
-
-.subTitle {
-    font-family: var(--font-lato);
-    font-size: 18px;
-    color: #c49c5c;
-    text-transform: uppercase;
     letter-spacing: 2px;
+    margin-bottom: 0;
+    line-height: 1.1;
 }
 
-/* Package Row */
+/* ============================================================
-.packageRow {
+   SPLIT PANEL — Each Package
+   ============================================================ */
+.packagePanel {
     display: flex;
-    align-items: center;
+    width: 100%;
-    gap: 60px;
+    min-height: 580px;
-    margin-bottom: 80px;
+    position: relative;
-    /* Reduced from 80px */
 }
 
-.packageRow.reverse {
+.packagePanel.reverse {
     flex-direction: row-reverse;
 }
 
-/* Content Side */
+/* ---- IMAGE SIDE ---- */
-.contentSide {
+.panelImageSide {
-    flex: 1;
+    flex: 0 0 55%;
-    padding: 20px;
-}
-
-.ribbonWrapper {
-    margin-bottom: 25px;
-    display: flex;
-    justify-content: flex-start;
-}
-
-
-
-.ribbon {
-    background-color: #c49c5c;
-    /* Gold/Orange theme */
-    color: #fff;
-    padding: 10px 30px;
     position: relative;
-    display: inline-block;
+    overflow: hidden;
-    /* Clip path for ribbon flag effect if desired */
-    clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%);
-    padding-right: 40px;
-    /* Space for the notch */
 }
 
-.ribbonText {
+.panelImage {
-    font-family: var(--font-playfair);
+    object-fit: cover;
-    font-size: 20px;
+    transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    font-weight: 700;
-    letter-spacing: 1px;
-    text-transform: uppercase;
 }
 
-.priceTag {
+.packagePanel:hover .panelImage {
-    margin-bottom: 30px;
+    transform: scale(1.05);
+}
+
+/* Gradient bridge from image → content */
+.imageFade {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+}
+
+/* For normal (image left) → fade right */
+.packagePanel:not(.reverse) .imageFade {
+    background: linear-gradient(
+        to right,
+        transparent 50%,
+        rgba(8, 6, 4, 0.8) 80%,
+        #080604 100%
+    );
+}
+
+/* For reversed (image right) → fade left */
+.packagePanel.reverse .imageFade {
+    background: linear-gradient(
+        to left,
+        transparent 50%,
+        rgba(8, 6, 4, 0.8) 80%,
+        #080604 100%
+    );
+}
+
+/* ---- CONTENT SIDE ---- */
+.panelContentSide {
+    flex: 0 0 45%;
+    background-color: #080604;
     display: flex;
-    align-items: baseline;
+    align-items: center;
-    gap: 10px;
+    position: relative;
-    border-bottom: 2px solid #f5e6d3;
+    overflow: hidden;
-    padding-bottom: 15px;
+    padding: 60px 70px;
 }
 
-.priceAmount {
+/* Ambient glow from the image side */
-    font-size: 32px;
+.packagePanel:not(.reverse) .panelContentSide::before {
-    font-weight: bold;
+    content: '';
-    color: #fff;
+    position: absolute;
+    left: -80px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(196, 156, 92, 0.18) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+.packagePanel.reverse .panelContentSide::before {
+    content: '';
+    position: absolute;
+    right: -80px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(196, 156, 92, 0.18) 0%, transparent 70%);
+    pointer-events: none;
+}
+
+/* Large watermark letter */
+.watermarkLetter {
+    position: absolute;
     font-family: var(--font-playfair);
+    font-size: 280px;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: -10px;
+    pointer-events: none;
+    z-index: 0;
+    opacity: 0.03;
+    color: #c49c5c;
+    top: 50%;
+    transform: translateY(-50%);
+    right: -30px;
+    user-select: none;
 }
 
-.priceDetail {
+.packagePanel.reverse .watermarkLetter {
-    font-size: 14px;
+    left: -30px;
+    right: auto;
+}
+
+/* Content wrapper */
+.panelInner {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+}
+
+/* Metallic tier badge */
+.tierBadge {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 22px;
+}
+
+.tierName {
+    font-size: 11px;
+    letter-spacing: 5px;
+    text-transform: uppercase;
+    font-weight: 800;
+    padding: 6px 18px;
+    position: relative;
+}
+
+/* Tier-specific metallic badge colours */
+.tierSilver .tierName {
+    background: linear-gradient(135deg, #8a8a8a 0%, #d8d8d8 40%, #a0a0a0 60%, #e0e0e0 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    border: 1px solid rgba(200, 200, 200, 0.35);
+}
+
+.tierGold .tierName {
+    background: linear-gradient(135deg, #9a6e28 0%, #e8c97a 40%, #b07c38 60%, #f0d790 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    border: 1px solid rgba(196, 156, 92, 0.4);
+}
+
+.tierPlatinum .tierName {
+    background: linear-gradient(135deg, #aaaaaa 0%, #f0f0f0 40%, #c0c0c0 60%, #ffffff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    border: 1px solid rgba(220, 220, 220, 0.4);
+}
+
+/* Package name */
+.packageName {
+    font-family: var(--font-playfair);
+    font-size: 52px;
+    font-weight: 400;
+    color: #f5e6d3;
+    line-height: 1;
+    margin-bottom: 8px;
+    letter-spacing: 1px;
+}
+
+/* Min. People pill */
+.packageMinPeople {
+    display: inline-block;
+    font-size: 11px;
+    letter-spacing: 3px;
+    text-transform: uppercase;
     color: #c49c5c;
     font-weight: 600;
-    text-transform: uppercase;
+    margin-bottom: 30px;
-    font-family: var(--font-lato);
 }
 
+/* Ornamental divider */
+.panelDivider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 28px;
+}
+
+.panelDivider::before,
+.panelDivider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: rgba(196, 156, 92, 0.3);
+}
+
+.panelDividerDot {
+    width: 6px;
+    height: 6px;
+    background: #c49c5c;
+    transform: rotate(45deg);
+    flex-shrink: 0;
+}
+
+/* Items list */
 .itemsList {
     list-style: none;
     padding: 0;
     margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 }
 
 .listItem {
     display: flex;
     align-items: flex-start;
-    gap: 15px;
+    gap: 12px;
-    margin-bottom: 15px;
+    font-size: 14px;
+    color: #b8a99a;
+    line-height: 1.5;
+    transition: color 0.2s;
 }
 
-.checkIcon {
+.listItem:hover {
+    color: #f0e4d4;
+}
+
+.checkMark {
     color: #c49c5c;
-    font-weight: bold;
+    font-size: 10px;
+    flex-shrink: 0;
+    margin-top: 3px;
+    opacity: 0.8;
 }
 
-.itemText {
+/* Accent border strip — between panels */
-    font-family: var(--font-lato);
+.panelAccentStrip {
-    font-size: 16px;
+    position: absolute;
-    color: #f0f0f0;
+    top: 0;
-    line-height: 1.6;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(180deg, transparent, rgba(196, 156, 92, 0.5) 40%, rgba(196, 156, 92, 0.5) 60%, transparent);
+    z-index: 5;
 }
 
-/* Image Side */
+.packagePanel:not(.reverse) .panelAccentStrip {
-.imageSide {
+    right: 45%;
-    flex: 1;
-    position: relative;
-    display: flex;
-    justify-content: center;
 }
 
-.archImageWrapper {
+.packagePanel.reverse .panelAccentStrip {
-    position: relative;
+    left: 45%;
-    width: 100%;
-    height: 500px;
-    border-radius: 200px 200px 20px 20px;
-    /* Arch shape */
-    overflow: hidden;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
-
+/* ============================================================
-
+   ADD-ONS SECTION
-.archImage {
+   ============================================================ */
-    object-fit: cover;
-    transition: transform 0.6s ease;
-}
-
-.archImageWrapper:hover .archImage {
-    transform: scale(1.05);
-}
-
-/* Add Ons Section */
 .addOnsSection {
     background-color: #000;
-    /* background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9)), url('/images/catering/bring-authentic.webp'); */
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
     padding: 80px 20px;
     width: 100%;
     text-align: center;
     color: #fff;
-    margin-top: 0;
 }
 
 .addOnsHeader {
     margin-bottom: 50px;
 }
 
-.addOnsSubtitle {
+.addOnsEyebrow {
     display: block;
     font-size: 14px;
     color: #c49c5c;
@@ -204,18 +352,18 @@
     line-height: 1.6;
 }
 
+/* Add-On Grid */
 .addOnsGrid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
-    /* 4 items */
     gap: 30px;
+    max-width: 1200px;
+    margin: 0 auto;
 }
 
 .addOnCard {
     background: #111;
     padding: 30px 20px;
-    /* Reduced padding */
-    /* border-radius: 5px; */
     border: 1px solid #222;
     display: flex;
     flex-direction: column;
@@ -236,35 +384,26 @@
     position: relative;
     width: 80px;
     height: 80px;
-    margin-bottom: 20px;
     border-radius: 50%;
     overflow: hidden;
     border: 3px solid #c49c5c;
+    flex-shrink: 0;
 }
 
 .addOnImage {
     object-fit: cover;
 }
 
-/* 
-.addOnIcon {
-    width: 50px;
-    height: 50px;
-    color: #c49c5c;
-    margin-bottom: 10px;
-} 
-*/
-
 .addOnName {
     font-family: var(--font-playfair);
     font-size: 20px;
     font-weight: 400;
     color: #fff;
     margin: 0;
+    text-align: center;
 }
 
 .addOnPrice {
-    font-family: var(--font-lato);
     font-size: 16px;
     color: #a0a0a0;
     line-height: 1.6;
@@ -272,40 +411,69 @@
 }
 
 /* Responsive */
-@media (max-width: 1200px) {
+@media (max-width: 1100px) {
+    .packageName {
+        font-size: 40px;
+    }
+
+    .panelContentSide {
+        padding: 50px 45px;
+    }
+}
+
+@media (max-width: 900px) {
+    .packagePanel,
+    .packagePanel.reverse {
+        flex-direction: column;
+    }
+
+    .panelImageSide {
+        flex: 0 0 300px;
+        height: 300px;
+    }
+
+    .packagePanel:not(.reverse) .imageFade,
+    .packagePanel.reverse .imageFade {
+        background: linear-gradient(to bottom, transparent 40%, #080604 100%);
+    }
+
+    .panelContentSide {
+        flex: 1;
+        padding: 40px 30px;
+    }
+
+    .panelAccentStrip {
+        display: none;
+    }
+
+    .watermarkLetter {
+        font-size: 180px;
+    }
+
     .addOnsGrid {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
-@media (max-width: 900px) {
-    .packageRow {
-        flex-direction: column;
-        gap: 40px;
-    }
-
-    .packageRow.reverse {
-        flex-direction: column;
-    }
-
-    .imageSide {
-        width: 100%;
-    }
-
-    .archImageWrapper {
-        width: 100%;
-        max-width: 500px;
-        height: 350px;
-        border-radius: 150px 150px 20px 20px;
-    }
-}
-
 @media (max-width: 600px) {
+    .mainTitle {
+        font-size: 38px;
+    }
+
+    .packageName {
+        font-size: 32px;
+    }
+
+    .panelImageSide {
+        flex: 0 0 240px;
+        height: 240px;
+    }
+
     .addOnsGrid {
         grid-template-columns: 1fr;
     }
 
-    .addOnsTitle {
+    .addOnCard {
-        font-size: 36px;
+        height: 240px;
     }
 }

src/app/catering-services-ontario/CateringPackages.tsx

@@ -1,32 +1,31 @@
 import React from 'react';
 import Image from 'next/image';
 import styles from './CateringPackages.module.css';
-import { motion } from 'framer-motion';
 
 const packages = [
     {
         id: 'silver',
-        name: 'SILVER PACKAGE',
+        tier: 'Silver',
-        // price: '$19',
+        tierClass: 'tierSilver',
-        // perPerson: 'PER PERSON',
+        watermark: 'S',
-        minPeople: 'MIN 20PPL',
+        minPeople: 'Minimum 20 People',
-        image: '/images/catering/packages/silver.webp', // Placeholder
+        image: '/images/catering/packages/silver.webp',
         items: [
             'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
             'Rice or Bulgur',
             'Choice of one salad (Garden, Greek, Caesar Salad)',
             'Choice of 1 appetizer (Babaghanoush, Hummus, Haydari)',
             'Freshly baked bread',
-            'Grilled tomato and peppers'
+            'Grilled tomato and peppers',
         ]
     },
     {
         id: 'gold',
-        name: 'GOLD PACKAGE',
+        tier: 'Gold',
-        // price: '$23',
+        tierClass: 'tierGold',
-        // perPerson: 'PER PERSON',
+        watermark: 'G',
-        minPeople: 'MIN 25PPL',
+        minPeople: 'Minimum 25 People',
-        image: '/images/catering/packages/gold.webp', // Placeholder
+        image: '/images/catering/packages/gold.webp',
         items: [
             'Choice of two kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
             'Rice or Bulgur',
@@ -35,16 +34,16 @@ const packages = [
             'Garlic potatoes or Fried and spiced eggplants',
             'Freshly baked bread',
             'Grilled tomato and peppers',
-            'Dessert (Sutlac-Rice Pudding)'
+            'Dessert (Sutlac-Rice Pudding)',
         ]
     },
     {
         id: 'platinum',
-        name: 'PLATINUM PACKAGE',
+        tier: 'Platinum',
-        // price: '$25',
+        tierClass: 'tierPlatinum',
-        // perPerson: 'PER PERSON',
+        watermark: 'P',
-        minPeople: 'MIN 30PPL',
+        minPeople: 'Minimum 30 People',
-        image: '/images/catering/packages/platinum.webp', // Placeholder
+        image: '/images/catering/packages/platinum.webp',
         items: [
             'Choice of 2 kebabs (Adana, Kofta, Chicken Shish, Meat Doner, Chicken Doner)',
             'Rice or Bulgur',
@@ -54,7 +53,7 @@ const packages = [
             'Grilled tomato and peppers',
             'Freshly baked bread',
             'Dessert (Sutlac-Rice Pudding)',
-            'Qabuli Plau (Basmati rice with carrots and raisins topped with veal chunks)'
+            'Qabuli Plau (Basmati rice with carrots and raisins topped with veal chunks)',
         ]
     }
 ];
@@ -63,87 +62,109 @@ const addOns = [
     { name: 'Tray of Falafel', price: '$60', image: '/images/catering/packages/tray.webp' },
     { name: 'Shola Gorbandi', price: '$80', image: '/images/catering/packages/shola.webp' },
     { name: 'Kavurma (Saluted Veal)', price: '$80', image: '/images/catering/packages/kavurma.webp' },
-    { name: 'Mantu (Afghan style dumplings)', price: '$80', image: '/images/catering/packages/mantu.webp' }
+    { name: 'Mantu (Afghan style dumplings)', price: '$80', image: '/images/catering/packages/mantu.webp' },
 ];
 
 const CateringPackages = () => {
     return (
         <>
+            {/* ── Packages Section ── */}
             <section className={styles.packagesSection}>
-                <div className={styles.container}>
-                    <div className={styles.header}>
-                        <h2 className={styles.mainTitle}>Catering Packages</h2>
-                        <p className={styles.subTitle}>Choose the perfect menu for your event</p>
-                    </div>
 
-                    {packages.map((pkg, index) => (
+                {/* Header */}
-                        <div key={pkg.id} className={`${styles.packageRow} ${index % 2 !== 0 ? styles.reverse : ''}`} style={index === packages.length - 1 ? { marginBottom: 0 } : {}}>
+                <div className={styles.sectionHeader}>
-                            {/* Content Side */}
+                    <p className={styles.eyebrow}>Tailored Experiences</p>
-                            <div className={styles.contentSide}>
+                    <h2 className={styles.mainTitle}>Catering Packages</h2>
-                                <div className={styles.ribbonWrapper}>
+                </div>
-                                    <div className={styles.ribbon}>
-                                        <span className={styles.ribbonText}>{pkg.name}</span>
-                                    </div>
-                                </div>
 
-                                <div className={styles.priceTag}>
+                {/* Package Panels */}
-                                    {/* <span className={styles.priceAmount}>{pkg?.price ? pkg.price : ''}</span> */}
+                {packages.map((pkg, index) => {
-                                    <span className={styles.priceDetail}>{pkg.minPeople}</span>
+                    const isReversed = index % 2 !== 0;
-                                </div>
+                    return (
+                        <div
+                            key={pkg.id}
+                            className={`${styles.packagePanel} ${isReversed ? styles.reverse : ''} ${styles[pkg.tierClass]}`}
+                        >
+                            {/* Accent strip between image & content */}
+                            <div className={styles.panelAccentStrip} />
 
-                                <ul className={styles.itemsList}>
+                            {/* ── Image Side ── */}
-                                    {pkg.items.map((item, i) => (
+                            <div className={styles.panelImageSide}>
-                                        <li key={i} className={styles.listItem}>
+                                <Image
-                                            <span className={styles.checkIcon}>✓</span>
+                                    src={pkg.image}
-                                            <span className={styles.itemText}>{item}</span>
+                                    alt={`${pkg.tier} catering package`}
-                                        </li>
+                                    fill
-                                    ))}
+                                    className={styles.panelImage}
-                                </ul>
+                                    priority={index === 0}
+                                />
+                                {/* Gradient bridge */}
+                                <div className={styles.imageFade} />
                             </div>
 
-                            {/* Image Side */}
+                            {/* ── Content Side ── */}
-                            <div className={styles.imageSide}>
+                            <div className={styles.panelContentSide}>
-                                <div className={styles.archImageWrapper}>
+                                {/* Watermark letter */}
-                                    <Image
+                                <span className={styles.watermarkLetter} aria-hidden="true">
-                                        src={pkg.image}
+                                    {pkg.watermark}
-                                        alt={pkg.name}
+                                </span>
-                                        fill
+
-                                        className={styles.archImage}
+                                <div className={styles.panelInner}>
-                                    />
+                                    {/* Tier badge */}
+                                    <div className={styles.tierBadge}>
+                                        <span className={styles.tierName}>{pkg.tier}</span>
+                                    </div>
+
+                                    {/* Package name */}
+                                    <h3 className={styles.packageName}>{pkg.tier} Package</h3>
+
+                                    {/* Min people */}
+                                    <p className={styles.packageMinPeople}>{pkg.minPeople}</p>
+
+                                    {/* Ornamental divider */}
+                                    <div className={styles.panelDivider}>
+                                        <span className={styles.panelDividerDot} />
+                                    </div>
+
+                                    {/* Items list */}
+                                    <ul className={styles.itemsList}>
+                                        {pkg.items.map((item, i) => (
+                                            <li key={i} className={styles.listItem}>
+                                                <span className={styles.checkMark}>◆</span>
+                                                <span>{item}</span>
+                                            </li>
+                                        ))}
+                                    </ul>
                                 </div>
                             </div>
                         </div>
-                    ))}
+                    );
-                </div>
+                })}
             </section>
 
-            {/* Add Ons Section */}
+            {/* ── Add-Ons Section ── */}
             <section className={styles.addOnsSection}>
-                <div className={styles.container}>
+                <div className={styles.addOnsHeader}>
-                    <div className={styles.addOnsHeader}>
+                    <span className={styles.addOnsEyebrow}>EXTRAS</span>
-                        <span className={styles.addOnsSubtitle}>EXTRAS</span>
+                    <h3 className={styles.addOnsTitle}>Delicious Add-Ons</h3>
-                        <h3 className={styles.addOnsTitle}>Delicious Add-Ons</h3>
+                    <p className={styles.addOnsDescription}>
-                        <p className={styles.addOnsDescription}>
+                        Enhance your catering package with our signature sides and specialty dishes.
-                            Enhance your catering package with our signature sides and specialty dishes.
+                    </p>
-                        </p>
+                </div>
-                    </div>
 
-                    <div className={styles.addOnsGrid}>
+                <div className={styles.addOnsGrid}>
-                        {addOns.map((addon, i) => (
+                    {addOns.map((addon, i) => (
-                            <div key={i} className={styles.addOnCard}>
+                        <div key={i} className={styles.addOnCard}>
-                                <div className={styles.addOnImageWrapper}>
+                            <div className={styles.addOnImageWrapper}>
-                                    <Image
+                                <Image
-                                        src={addon.image}
+                                    src={addon.image}
-                                        alt={addon.name}
+                                    alt={addon.name}
-                                        fill
+                                    fill
-                                        className={styles.addOnImage}
+                                    className={styles.addOnImage}
-                                    />
+                                />
-                                </div>
-                                <h4 className={styles.addOnName}>{addon.name}</h4>
-                                <p className={styles.addOnPrice}>{addon.price}</p>
                             </div>
-                        ))}
+                            <h4 className={styles.addOnName}>{addon.name}</h4>
-                    </div>
+                        </div>
+                    ))}
                 </div>
             </section>
         </>

src/app/catering-services-ontario/catering.module.css

@@ -476,7 +476,7 @@
 
 .smallHeading {
     font-size: var(--small-text-size);
-    color: var(--color-paragraph);
+    color: #441123;
     font-family: var(--font-lato);
     font-weight: 600;
     letter-spacing: 2px;
@@ -1113,25 +1113,25 @@
     gap: 15px;
     margin-bottom: 20px;
     font-size: var(--body-size);
-    color: var(--color-alterparagraph) !important;
+    color: #441109 !important;
     font-family: var(--font-lato);
     line-height: 1.6;
 }
 
 .aboutSpecialsIcon {
-    color: var(--color-button);
+    color: #441123;
     font-weight: bold;
     font-size: 20px;
     flex-shrink: 0;
 }
 
 .lastButton {
-    color: var(--color-alterparagraph) !important;
+    color: #441109 !important;
     font-family: var(--font-lato);
     text-transform: uppercase;
     letter-spacing: 1px;
     background: none;
-    border: 2px solid #b07c4b;
+    border: 2px solid #441109;
     margin-top: 1rem;
     padding: 15px 40px;
     font-size: 1.1rem;
@@ -1141,7 +1141,7 @@
 }
 
 .lastButton:hover {
-    background-color: #c49c5c;
+    background-color: #441123;
     color: #fff !important;
     transform: translateY(-2px);
     /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */