catering section content organized

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

@@ -160,7 +160,7 @@ export default function CateringContent() {
                                 <div className={styles.topCardOverlay}></div>
                             </div>
                             <div className={styles.topCardContent}>
-                                <h3 className={styles.topCardTitle}>Events & Celebrations</h3>
+                                <h3 className={styles.topCardTitle}>Corporate & Social Events</h3>
                                 {/* <button className={styles.topCardButton}>
                                     <span>→</span>
                                 </button> */}
@@ -179,7 +179,7 @@ export default function CateringContent() {
                                 <div className={styles.topCardOverlay}></div>
                             </div>
                             <div className={styles.topCardContent}>
-                                <h3 className={styles.topCardTitle}>Food & Beverage Catering</h3>
+                                <h3 className={styles.topCardTitle}>Family Gatherings & Weddings</h3>
                                 {/* <button className={styles.topCardButton}>
                                     <span>→</span>
                                 </button> */}
@@ -198,7 +198,7 @@ export default function CateringContent() {
                                 <div className={styles.topCardOverlay}></div>
                             </div>
                             <div className={styles.topCardContent}>
-                                <h3 className={styles.topCardTitle}>Venue & Service Options</h3>
+                                <h3 className={styles.topCardTitle}>Birthday Party & Baby Shower</h3>
                                 {/* <button className={styles.topCardButton}>
                                     <span>→</span>
                                 </button> */}

src/components/Catering/Catering.module.css

@@ -196,7 +196,7 @@
     grid-template-columns: 1.1fr 1fr;
 
     gap: 20px;
-    margin-bottom: 40px;
+    margin-bottom: 15px;
 }
 
 /* Features List */
@@ -440,4 +440,175 @@
     .actionRow {
         justify-content: center;
     }
+}
+
+/* Perfect 320px Mobile Styles */
+@media (max-width: 320px) {
+    .cateringSection {
+        padding: 60px 0;
+    }
+
+    .container {
+        padding: 0 15px;
+        gap: 40px;
+    }
+
+    /* Left Side - Images */
+    .leftSide {
+        min-height: 420px;
+    }
+
+    .topLeftImage {
+        height: 250px;
+        margin-bottom: -40px;
+    }
+
+    .bottomRightImage {
+        height: 220px;
+        width: 85%;
+        margin-left: 15%;
+        border-top: 8px solid #c49c5c;
+        border-left: 8px solid #c49c5c;
+    }
+
+    .decorativeFrame {
+        width: 100px;
+        height: 100px;
+        border-left: 12px solid #c49c5c;
+        border-bottom: 12px solid #c49c5c;
+    }
+
+    /* Email Widget - Critical Fix for 320px */
+    .callWidgetLeft {
+        position: absolute;
+        top: 15px;
+        right: 0;
+        left: auto;
+        max-width: 280px;
+        width: calc(100% - 15px);
+        padding: 12px 10px;
+        gap: 10px;
+        border-left: 4px solid #c49c5c;
+    }
+
+    .callIconCircleLeft {
+        width: 45px;
+        height: 45px;
+        flex-shrink: 0;
+    }
+
+    .callIconLeft {
+        width: 20px;
+        height: 20px;
+    }
+
+    .callLabelLeft {
+        font-size: 11px;
+        margin-bottom: 2px;
+    }
+
+    .callNumberLeft {
+        font-size: 13px;
+        line-height: 1.2;
+        word-break: break-all;
+    }
+
+    /* Right Side - Content */
+    .smallHeading {
+        font-size: 12px;
+        margin-bottom: 0.75rem;
+        letter-spacing: 1px;
+    }
+
+    .title {
+        font-size: 28px;
+        margin-bottom: 15px;
+        line-height: 1.3;
+    }
+
+    .description {
+        font-size: 14px;
+        line-height: 1.6;
+        margin-bottom: 30px;
+    }
+
+    /* Features */
+    .featuresColumn {
+        gap: 20px;
+    }
+
+    .featureItem {
+        gap: 12px;
+    }
+
+    .featureIconCircle {
+        width: 45px;
+        height: 45px;
+        border: 2px solid #c49c5c;
+    }
+
+    .featureIcon {
+        width: 20px;
+        height: 20px;
+    }
+
+    .featureContent h4 {
+        font-size: 15px;
+        white-space: normal;
+        line-height: 1.3;
+    }
+
+    /* Quote Box */
+    .quoteBoxWrapper {
+        padding: 20px 15px;
+        min-height: 180px;
+        border-radius: 15px 0 15px 0;
+    }
+
+    .quoteText {
+        font-size: 13px;
+        line-height: 1.5;
+        margin-bottom: 15px;
+    }
+
+    .quoteIcon {
+        font-size: 50px;
+        bottom: -5px;
+    }
+
+    .sliderdots {
+        gap: 6px;
+    }
+
+    .dot {
+        width: 7px;
+        height: 7px;
+    }
+
+    .activeDot {
+        width: 18px;
+    }
+
+    /* Action Row */
+    .actionRow {
+        padding-top: 15px;
+        gap: 20px;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .discoverBtn {
+        padding: 12px 30px;
+        font-size: 14px;
+        width: 100%;
+        max-width: 280px;
+        justify-content: center;
+        text-align: center;
+    }
+
+    /* Middle Content Row */
+    .middleContentRow {
+        gap: 25px;
+        margin-bottom: 25px;
+    }
 }

src/components/Catering/Catering.tsx

@@ -215,7 +215,7 @@ export default function Catering() {
                                     <div className={styles.featureIcon}><FamilyIcon /></div>
                                 </div>
                                 <div className={styles.featureContent}>
-                                    <h4>Family Gatherings</h4>
+                                    <h4>Family Gatherings & Weddings</h4>
                                 </div>
                             </motion.div>
                             <motion.div variants={itemVariants} className={styles.featureItem}>
@@ -223,25 +223,25 @@ export default function Catering() {
                                     <div className={styles.featureIcon}><BirthdayIcon /></div>
                                 </div>
                                 <div className={styles.featureContent}>
-                                    <h4>Birthday Party</h4>
+                                    <h4>Birthday Party & Baby Shower</h4>
                                 </div>
                             </motion.div>
-                            <motion.div variants={itemVariants} className={styles.featureItem}>
+                            {/* <motion.div variants={itemVariants} className={styles.featureItem}>
                                 <div className={styles.featureIconCircle}>
                                     <div className={styles.featureIcon}><BabyIcon /></div>
                                 </div>
                                 <div className={styles.featureContent}>
                                     <h4>Baby Shower</h4>
                                 </div>
-                            </motion.div>
-                            <motion.div variants={itemVariants} className={styles.featureItem}>
+                            </motion.div> */}
+                            {/* <motion.div variants={itemVariants} className={styles.featureItem}>
                                 <div className={styles.featureIconCircle}>
                                     <div className={styles.featureIcon}><WeddingIcon /></div>
                                 </div>
                                 <div className={styles.featureContent}>
                                     <h4>Weddings</h4>
                                 </div>
-                            </motion.div>
+                            </motion.div> */}
                         </div>
 
                         {/* Quote Box Slider */}