{"id":61,"date":"2026-05-19T05:21:23","date_gmt":"2026-05-19T05:21:23","guid":{"rendered":"https:\/\/croffwich.vyomtelosconsulting.com\/?page_id=61"},"modified":"2026-05-20T19:26:22","modified_gmt":"2026-05-20T19:26:22","slug":"home","status":"publish","type":"page","link":"https:\/\/croffwich.vyomtelosconsulting.com\/?page_id=61","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"61\" class=\"elementor elementor-61\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a8abc67 e-flex e-con-boxed e-con e-parent\" data-id=\"a8abc67\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51a10d9 elementor-widget elementor-widget-html\" data-id=\"51a10d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================\r\n     SWIPER CSS\r\n========================= -->\r\n\r\n<link\r\nrel=\"stylesheet\"\r\nhref=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.css\"\r\n\/>\r\n\r\n<!-- Google Fonts -->\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Pacifico&family=Montserrat:wght@500;700;800;900&family=Poppins:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- =========================\r\n     MAIN SLIDER\r\n========================= -->\r\n\r\n<div class=\"swiper croff-slider\">\r\n\r\n  <div class=\"swiper-wrapper\">\r\n\r\n    <!-- ======================================================\r\n         SLIDE 1\r\n    ======================================================= -->\r\n\r\n    <div class=\"swiper-slide\">\r\n\r\n      <section class=\"hero-section\">\r\n\r\n        <div class=\"hero-content\">\r\n\r\n          <div class=\"hero-top-text\">\r\n            Where Croissants Meet Waffles\r\n          <\/div>\r\n\r\n          <h1 class=\"hero-title\">\r\n            <span class=\"croff\">CROFF<\/span>\r\n            <span class=\"wich\">WICH<\/span>\r\n          <\/h1>\r\n\r\n          <h2>\r\n            Comfort food, waffled to perfection.\r\n          <\/h2>\r\n\r\n          <div class=\"hero-highlight\">\r\n            Flaky. Crispy. Unapologetically satisfying.\r\n          <\/div>\r\n\r\n          <a href=\"#\" class=\"hero-btn\">\r\n            Explore Menu\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n        <!-- Floating Images -->\r\n\r\n        <div class=\"float-item float-1\">\r\n          <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/Untitled-2.png\">\r\n        <\/div>\r\n\r\n        <div class=\"float-item float-2\">\r\n          <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/w-1-scaled.png\">\r\n        <\/div>\r\n\r\n        <div class=\"float-item float-3\">\r\n          <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/Untitled-2.png\">\r\n        <\/div>\r\n\r\n        <!-- Bottom Curve -->\r\n\r\n        <div class=\"bottom-wave\">\r\n          <svg viewBox=\"0 0 1440 320\" preserveAspectRatio=\"none\">\r\n            <path fill=\"#ffffff\"\r\n              d=\"M0,224L80,202.7C160,181,320,139,480,138.7C640,139,800,181,960,186.7C1120,192,1280,160,1360,144L1440,128L1440,320L0,320Z\">\r\n            <\/path>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n      <\/section>\r\n\r\n    <\/div>\r\n\r\n    <!-- ======================================================\r\n         SLIDE 2\r\n    ======================================================= -->\r\n\r\n    <div class=\"swiper-slide\">\r\n\r\n      <section class=\"experience-section\">\r\n\r\n        <div class=\"experience-content\">\r\n\r\n          <div class=\"experience-top-text\">\r\n            Familiar enough to crave\r\n          <\/div>\r\n\r\n          <h1 class=\"experience-title\">\r\n            <span class=\"fast\">THE<\/span>\r\n            <span class=\"casual\">CROFFLE<\/span>\r\n          <\/h1>\r\n\r\n          \r\n\r\n          <p>\r\n        At the heart of everything we do is the croffle\u2014croissant dough, waffled fresh. Crisp on the outside, soft and layered on the inside, it\u2019s the foundation for both our sweet and savoury offerings.\r\n          <\/p>\r\n\r\n          <div class=\"experience-highlight\">\r\n            Unexpected enough to obsess over\r\n          <\/div>\r\n\r\n          <a href=\"#\" class=\"experience-btn\">\r\n            Discover More\r\n          <\/a>\r\n\r\n        <\/div>\r\n\r\n        <!-- Floating Images -->\r\n\r\n        <div class=\"float-item float-1\">\r\n          <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/Untitled-2.png\">\r\n        <\/div>\r\n\r\n        <div class=\"float-item float-2\">\r\n          <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/w-1-scaled.png\">\r\n        <\/div>\r\n\r\n        <div class=\"float-item float-3\">\r\n          <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/Untitled-2.png\">\r\n        <\/div>\r\n\r\n        <!-- Bottom Curve -->\r\n\r\n        <div class=\"bottom-wave\">\r\n          <svg viewBox=\"0 0 1440 320\" preserveAspectRatio=\"none\">\r\n            <path fill=\"#ffffff\"\r\n              d=\"M0,160L80,181.3C160,203,320,245,480,245.3C640,245,800,203,960,176C1120,149,1280,139,1360,138.7L1440,139L1440,320L0,320Z\">\r\n            <\/path>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n      <\/section>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Pagination -->\r\n\r\n  <div class=\"swiper-pagination\"><\/div>\r\n\r\n<\/div>\r\n\r\n<!-- =========================\r\n     STYLE\r\n========================= -->\r\n\r\n<style>\r\n\r\n\/* =========================\r\n   COMMON\r\n========================= *\/\r\n\r\nbody{\r\n  margin:0;\r\n  overflow-x:hidden;\r\n  font-family:'Poppins',sans-serif;\r\n}\r\n\r\n.swiper{\r\n  width:100%;\r\n  height:100vh;\r\n}\r\n\r\n.swiper-slide{\r\n  position:relative;\r\n}\r\n\r\n\/* =========================\r\n   HERO SECTION\r\n========================= *\/\r\n\r\n.hero-section{\r\n  background:#c1e5ff;\r\n  min-height:100vh;\r\n  display:flex;\r\n  align-items:center;\r\n  padding:100px 8%;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n\r\n\/* =========================\r\n   EXPERIENCE SECTION\r\n========================= *\/\r\n\r\n.experience-section{\r\n  background:#fed5bf;\r\n  min-height:100vh;\r\n  display:flex;\r\n  align-items:center;\r\n  padding:100px 8%;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n\r\n\/* =========================\r\n   CONTENT\r\n========================= *\/\r\n\r\n.hero-content,\r\n.experience-content{\r\n  position:relative;\r\n  z-index:5;\r\n  max-width:720px;\r\n}\r\n\r\n\/* =========================\r\n   TOP TEXT\r\n========================= *\/\r\n\r\n.hero-top-text,\r\n.experience-top-text{\r\n  font-family:'Pacifico',cursive;\r\n  font-size:48px;\r\n  color:#ff4b8a;\r\n  margin-bottom:20px;\r\n  animation:zoomIntro 1.2s ease forwards;\r\n}\r\n\r\n\/* =========================\r\n   TITLES\r\n========================= *\/\r\n\r\n.hero-title,\r\n.experience-title{\r\n  font-family:'Montserrat',sans-serif;\r\n  font-size:110px;\r\n  font-weight:900;\r\n  display:flex;\r\n  gap:12px;\r\n  margin:0 0 20px;\r\n  overflow:hidden;\r\n}\r\n\r\n\/* Hero *\/\r\n\r\n.hero-title .croff{\r\n  color:#5d9bd3;\r\n  animation:moveLeft 1.5s ease forwards;\r\n}\r\n\r\n.hero-title .wich{\r\n  color:#5d9bd3;\r\n  animation:moveRight 1.5s ease forwards;\r\n}\r\n\r\n\/* Experience *\/\r\n\r\n.experience-title .fast{\r\n  color:#d1782f;\r\n  animation:moveLeft 1.5s ease forwards;\r\n}\r\n\r\n.experience-title .casual{\r\n  color:#b85c38;\r\n  animation:moveRight 1.5s ease forwards;\r\n}\r\n\r\n\/* =========================\r\n   SUB TITLE\r\n========================= *\/\r\n\r\n.hero-content h2,\r\n.experience-content h2{\r\n  font-size:34px;\r\n  margin-bottom:20px;\r\n  color:#222;\r\n}\r\n\r\n\/* =========================\r\n   PARAGRAPH\r\n========================= *\/\r\n\r\n.experience-content p{\r\n  font-size:18px;\r\n  line-height:1.9;\r\n  color:#ffffff;\r\n  max-width:620px;\r\n  margin-bottom:30px;\r\n}\r\n\r\n\/* =========================\r\n   HIGHLIGHT\r\n========================= *\/\r\n\r\n.hero-highlight,\r\n.experience-highlight{\r\n  font-size:24px;\r\n  font-weight:700;\r\n  margin-bottom:35px;\r\n}\r\n\r\n.hero-highlight{\r\n  color:#9a5b00;\r\n}\r\n\r\n.experience-highlight{\r\n  color:#9a4d17;\r\n}\r\n\r\n\/* =========================\r\n   BUTTONS\r\n========================= *\/\r\n\r\n.hero-btn,\r\n.experience-btn{\r\n  display:inline-block;\r\n  padding:16px 38px;\r\n  color:#fff;\r\n  border-radius:60px;\r\n  text-decoration:none;\r\n  font-weight:600;\r\n  transition:0.3s ease;\r\n}\r\n\r\n.hero-btn{\r\n  background:#5d9bd3;\r\n}\r\n\r\n.hero-btn:hover{\r\n  background:#ff4b8a;\r\n}\r\n\r\n.experience-btn{\r\n  background:#b85c38;\r\n}\r\n\r\n.experience-btn:hover{\r\n  background:#ff5c8a;\r\n}\r\n\r\n\/* =========================\r\n   FLOATING IMAGES\r\n========================= *\/\r\n\r\n.float-item{\r\n  position:absolute;\r\n  z-index:2;\r\n  animation:premiumFloat 5s ease-in-out infinite;\r\n}\r\n\r\n.float-item img{\r\n  width:100%;\r\n  display:block;\r\n  filter:drop-shadow(0 20px 35px rgba(0,0,0,0.16));\r\n}\r\n\r\n\/* Positions *\/\r\n\r\n.float-1{\r\n  width:260px;\r\n  right:7%;\r\n  top:12%;\r\n}\r\n\r\n.float-2{\r\n  width:190px;\r\n  right:20%;\r\n  top:50%;\r\n  animation-delay:1s;\r\n}\r\n\r\n.float-3{\r\n  width:130px;\r\n  right:5%;\r\n  top:72%;\r\n  animation-delay:2s;\r\n}\r\n\r\n\/* =========================\r\n   BOTTOM CURVE\r\n========================= *\/\r\n\r\n.bottom-wave{\r\n  position:absolute;\r\n  bottom:-2px;\r\n  left:0;\r\n  width:100%;\r\n  line-height:0;\r\n  z-index:3;\r\n}\r\n\r\n.bottom-wave svg{\r\n  width:100%;\r\n  height:140px;\r\n  display:block;\r\n}\r\n\r\n\/* =========================\r\n   ANIMATIONS\r\n========================= *\/\r\n\r\n@keyframes zoomIntro{\r\n\r\n  0%{\r\n    transform:scale(2);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:scale(1);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n@keyframes moveLeft{\r\n\r\n  0%{\r\n    transform:translateX(-500px);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:translateX(0);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n@keyframes moveRight{\r\n\r\n  0%{\r\n    transform:translateX(500px);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:translateX(0);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n@keyframes premiumFloat{\r\n\r\n  0%{\r\n    transform:translateY(0px) rotate(0deg) scale(1);\r\n  }\r\n\r\n  25%{\r\n    transform:translateY(-18px) rotate(4deg) scale(1.04);\r\n  }\r\n\r\n  50%{\r\n    transform:translateY(0px) rotate(0deg) scale(1.08);\r\n  }\r\n\r\n  75%{\r\n    transform:translateY(18px) rotate(-4deg) scale(1.04);\r\n  }\r\n\r\n  100%{\r\n    transform:translateY(0px) rotate(0deg) scale(1);\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   PAGINATION\r\n========================= *\/\r\n\r\n.swiper-pagination-bullet{\r\n  background:#fff;\r\n  opacity:0.7;\r\n}\r\n\r\n.swiper-pagination-bullet-active{\r\n  background:#ff4b8a;\r\n  opacity:1;\r\n}\r\n\r\n\/* =========================\r\n   RESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:991px){\r\n\r\n  .hero-title,\r\n  .experience-title{\r\n    font-size:72px;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:767px){\r\n\r\n  .hero-title,\r\n  .experience-title{\r\n    font-size:48px;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .hero-top-text,\r\n  .experience-top-text{\r\n    font-size:28px;\r\n  }\r\n\r\n  .float-item{\r\n    opacity:0.5;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<!-- =========================\r\n     SWIPER JS\r\n========================= -->\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/swiper@11\/swiper-bundle.min.js\"><\/script>\r\n\r\n<script>\r\n\r\nvar swiper = new Swiper(\".croff-slider\", {\r\n\r\n  effect: \"slide\",\r\n\r\n  speed: 1200,\r\n\r\n  loop: true,\r\n\r\n  autoplay: {\r\n    delay: 5000,\r\n    disableOnInteraction: false,\r\n  },\r\n\r\n  pagination: {\r\n    el: \".swiper-pagination\",\r\n    clickable: true,\r\n  },\r\n\r\n});\r\n\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d348901 e-flex e-con-boxed e-con e-parent\" data-id=\"d348901\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0e6e6a8 elementor-widget elementor-widget-html\" data-id=\"0e6e6a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Google Fonts -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Pacifico&family=Montserrat:wght@500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- =========================\r\n     MENU COLLECTION SECTION\r\n========================= -->\r\n\r\n<section class=\"collection-section\">\r\n\r\n  <!-- LEFT CONTENT -->\r\n\r\n  <div class=\"collection-left\">\r\n\r\n    <span class=\"section-tag\">\r\n      Our Signature Menu\r\n    <\/span>\r\n\r\n    <h2>\r\n      Freshly Waffled.<br>\r\n      Boldly Crafted.\r\n    <\/h2>\r\n\r\n    <p>\r\n      From sweet croffles to refreshing smoothies,\r\n      every item is crafted for texture, flavour,\r\n      and unforgettable cravings.\r\n    <\/p>\r\n\r\n    <a href=\"#\" class=\"read-btn\">\r\n      VIEW FULL MENU\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n  <!-- RIGHT ITEMS -->\r\n\r\n  <div class=\"collection-items\">\r\n\r\n    <!-- ITEM 1 -->\r\n\r\n    <div class=\"collection-item\">\r\n\r\n      <div class=\"icon-circle\">\r\n        \ud83e\uddc7\r\n      <\/div>\r\n\r\n      <h3>CROFFLES<\/h3>\r\n\r\n      <p>\r\n        Sweet and savoury croffles served golden and crisp.\r\n      <\/p>\r\n\r\n     \r\n\r\n    <\/div>\r\n\r\n    <!-- DASH LINE -->\r\n\r\n    <div class=\"line-shape\"><\/div>\r\n\r\n    <!-- ITEM 2 -->\r\n\r\n    <div class=\"collection-item\">\r\n\r\n      <div class=\"icon-circle\">\r\n        \ud83c\udf73\r\n      <\/div>\r\n\r\n      <h3>BREAKFAST CROFFLES<\/h3>\r\n\r\n      <p>\r\n        Morning-ready croffles designed for breakfast and brunch.\r\n      <\/p>\r\n\r\n      \r\n\r\n    <\/div>\r\n\r\n    <!-- DASH LINE -->\r\n\r\n    <div class=\"line-shape\"><\/div>\r\n\r\n    <!-- ITEM 3 -->\r\n\r\n    <div class=\"collection-item\">\r\n\r\n      <div class=\"icon-circle\">\r\n        \ud83e\udd65\r\n      <\/div>\r\n\r\n      <h3>COCONUT SMOOTHIES<\/h3>\r\n\r\n      <p>\r\n        Creamy coconut-based blends, refreshing and satisfying.\r\n      <\/p>\r\n\r\n     \r\n\r\n    <\/div>\r\n\r\n    <!-- DASH LINE -->\r\n\r\n    <div class=\"line-shape\"><\/div>\r\n\r\n    <!-- ITEM 4 -->\r\n\r\n    <div class=\"collection-item\">\r\n\r\n      <div class=\"icon-circle\">\r\n        \ud83c\udf53\r\n      <\/div>\r\n\r\n      <h3>YOGURT SMOOTHIES<\/h3>\r\n\r\n      <p>\r\n        Light, smooth, and perfectly balanced yogurt blends.\r\n      <\/p>\r\n\r\n      \r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\r\n\/* =========================\r\n   SECTION\r\n========================= *\/\r\n\r\n.collection-section{\r\n  background:#f;\r\n  padding:90px 6%;\r\n  \r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  gap:40px;\r\n  overflow:hidden;\r\n  font-family:'Poppins',sans-serif;\r\n}\r\n\r\n\/* =========================\r\n   LEFT CONTENT\r\n========================= *\/\r\n\r\n.collection-left{\r\n  max-width:320px;\r\n}\r\n\r\n.section-tag{\r\n  font-family:'Pacifico',cursive;\r\n  color:#ff4b8a;\r\n  font-size:26px;\r\n  display:block;\r\n  margin-bottom:18px;\r\n\r\n  animation:zoomText 1s ease;\r\n}\r\n\r\n.collection-left h2{\r\n  font-family:'Montserrat',sans-serif;\r\n  font-size:42px;\r\n  line-height:1.2;\r\n  color:#0d4c81;\r\n  margin-bottom:18px;\r\n  font-weight:700;\r\n}\r\n\r\n.collection-left p{\r\n  font-size:16px;\r\n  line-height:1.8;\r\n  color:#6d6d6d;\r\n  margin-bottom:28px;\r\n}\r\n\r\n.read-btn{\r\n  display:inline-block;\r\n  background:#ff4b8a;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  padding:14px 28px;\r\n  font-size:14px;\r\n  font-weight:700;\r\n  transition:0.3s ease;\r\n}\r\n\r\n.read-btn:hover{\r\n  background:#0d4c81;\r\n  transform:translateY(-4px);\r\n}\r\n\r\n\/* =========================\r\n   ITEMS\r\n========================= *\/\r\n\r\n.collection-items{\r\n  display:flex;\r\n  align-items:flex-start;\r\n  gap:28px;\r\n  flex:1;\r\n}\r\n\r\n.collection-item{\r\n  text-align:center;\r\n  max-width:210px;\r\n  position:relative;\r\n}\r\n\r\n\/* =========================\r\n   ICON\r\n========================= *\/\r\n\r\n.icon-circle{\r\n  width:120px;\r\n  height:120px;\r\n  background:#ececec;\r\n  border-radius:50%;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-size:48px;\r\n  margin:0 auto 22px;\r\n\r\n  animation:floatIcon 4s ease-in-out infinite;\r\n}\r\n\r\n\/* =========================\r\n   TITLE\r\n========================= *\/\r\n\r\n.collection-item h3{\r\n  font-family:'Montserrat',sans-serif;\r\n  font-size:22px;\r\n  line-height:1.4;\r\n  color:#0d4c81;\r\n  margin-bottom:14px;\r\n}\r\n\r\n\/* =========================\r\n   TEXT\r\n========================= *\/\r\n\r\n.collection-item p{\r\n  font-size:15px;\r\n  line-height:1.8;\r\n  color:#7a7a7a;\r\n  margin-bottom:20px;\r\n}\r\n\r\n\/* =========================\r\n   LINK\r\n========================= *\/\r\n\r\n.collection-item a{\r\n  color:#222;\r\n  text-decoration:none;\r\n  font-size:14px;\r\n  font-weight:700;\r\n  border-bottom:2px solid #ff4b8a;\r\n  padding-bottom:3px;\r\n  transition:0.3s ease;\r\n}\r\n\r\n.collection-item a:hover{\r\n  color:#ff4b8a;\r\n}\r\n\r\n\/* =========================\r\n   DASHED LINE\r\n========================= *\/\r\n\r\n.line-shape{\r\n  width:70px;\r\n  height:2px;\r\n  border-top:2px dashed #ff4b8a;\r\n  margin-top:55px;\r\n  position:relative;\r\n}\r\n\r\n.line-shape::after{\r\n  content:'\u00d7';\r\n  position:absolute;\r\n  right:-10px;\r\n  top:-15px;\r\n  font-size:24px;\r\n  color:#ff4b8a;\r\n}\r\n\r\n\/* =========================\r\n   ANIMATIONS\r\n========================= *\/\r\n\r\n@keyframes floatIcon{\r\n\r\n  0%{\r\n    transform:translateY(0px);\r\n  }\r\n\r\n  50%{\r\n    transform:translateY(-10px);\r\n  }\r\n\r\n  100%{\r\n    transform:translateY(0px);\r\n  }\r\n\r\n}\r\n\r\n@keyframes zoomText{\r\n\r\n  0%{\r\n    transform:scale(0.5);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:scale(1);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   RESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:1200px){\r\n\r\n  .collection-section{\r\n    flex-direction:column;\r\n    text-align:center;\r\n  }\r\n\r\n  .collection-items{\r\n    flex-wrap:wrap;\r\n    justify-content:center;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:991px){\r\n\r\n  .line-shape{\r\n    display:none;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:767px){\r\n\r\n  .collection-left h2{\r\n    font-size:34px;\r\n  }\r\n\r\n  .collection-items{\r\n    flex-direction:column;\r\n    align-items:center;\r\n  }\r\n\r\n  .collection-item{\r\n    max-width:300px;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-39f495c e-flex e-con-boxed e-con e-parent\" data-id=\"39f495c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-462432e elementor-widget elementor-widget-html\" data-id=\"462432e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Google Fonts -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Pacifico&family=Montserrat:wght@500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- =========================\r\n     CAKE SHOWCASE SECTION\r\n========================= -->\r\n\r\n<section class=\"cake-showcase\">\r\n\r\n  <!-- LEFT SIDE -->\r\n\r\n  <div class=\"cake-images\">\r\n\r\n  \r\n\r\n    <!-- IMAGE SLIDER -->\r\n\r\n    <div class=\"image-slider\">\r\n\r\n      <!-- Image 1 -->\r\n\r\n      <img decoding=\"async\"\r\n        src=\"https:\/\/images.unsplash.com\/photo-1578985545062-69928b1d9587?q=80&w=1200&auto=format&fit=crop\"\r\n        class=\"slide-image\"\r\n        alt=\"\"\r\n      >\r\n\r\n      <!-- Image 2 -->\r\n\r\n      <img decoding=\"async\"\r\n        src=\"https:\/\/images.unsplash.com\/photo-1565958011703-44f9829ba187?q=80&w=1200&auto=format&fit=crop\"\r\n        class=\"slide-image\"\r\n        alt=\"\"\r\n      >\r\n\r\n    <\/div>\r\n\r\n  \r\n\r\n  <\/div>\r\n\r\n  <!-- RIGHT CONTENT -->\r\n\r\n  <div class=\"cake-content\">\r\n\r\n    <span class=\"section-tag\">\r\n      Want to See More\r\n    <\/span>\r\n\r\n    <h2>\r\n      Handmade Cakes<br>\r\n      For Your Every Taste\r\n    <\/h2>\r\n\r\n    <p class=\"main-text\">\r\n      Anyway, you still use Lorem Ipsum and rightly so,\r\n      as it will always have a place in the web workers toolbox,\r\n      as things happen, not always the way you like it,\r\n      not always in the preferred order.\r\n    <\/p>\r\n\r\n    <!-- STATS -->\r\n\r\n    <div class=\"stats-grid\">\r\n\r\n      <!-- CARD 1 -->\r\n\r\n      <div class=\"stat-card\">\r\n\r\n        <h3>345<\/h3>\r\n\r\n        <p>\r\n          Even if your less into design and more into content\r\n        <\/p>\r\n\r\n        <a href=\"#\">\r\n          READ MORE\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n      <!-- CARD 2 -->\r\n\r\n      <div class=\"stat-card\">\r\n\r\n        <h3>120+<\/h3>\r\n\r\n        <p>\r\n          You made all the required mock for commissioned\r\n        <\/p>\r\n\r\n        <a href=\"#\">\r\n          READ MORE\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n      <!-- CARD 3 -->\r\n\r\n      <div class=\"stat-card\">\r\n\r\n        <h3>65+<\/h3>\r\n\r\n        <p>\r\n          Strategy you may find some redeeming value with\r\n        <\/p>\r\n\r\n        <a href=\"#\">\r\n          READ MORE\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n      <!-- CARD 4 -->\r\n\r\n      <div class=\"stat-card\">\r\n\r\n        <h3>850<\/h3>\r\n\r\n        <p>\r\n          Layout, got all the approvals, built a tested code base\r\n        <\/p>\r\n\r\n        <a href=\"#\">\r\n          READ MORE\r\n        <\/a>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\r\n\/* =========================\r\n   SECTION\r\n========================= *\/\r\n\r\n.cake-showcase{\r\n  background:#f5f5f5;\r\n  padding:70px 5%;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:space-between;\r\n  gap:50px;\r\n  overflow:hidden;\r\n  font-family:'Poppins',sans-serif;\r\n}\r\n\r\n\/* =========================\r\n   LEFT SIDE\r\n========================= *\/\r\n\r\n.cake-images{\r\n  position:relative;\r\n  width:48%;\r\n  min-height:550px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n}\r\n\r\n\r\n\r\n\/* =========================\r\n   IMAGE SLIDER\r\n========================= *\/\r\n\r\n.image-slider{\r\n  position:relative;\r\n  width:420px;\r\n  height:420px;\r\n  border-radius:50%;\r\n  overflow:hidden;\r\n  z-index:2;\r\n\r\n  box-shadow:0 25px 45px rgba(0,0,0,0.18);\r\n}\r\n\r\n\/* Images *\/\r\n\r\n\/* =========================\r\n   IMAGE SLIDER\r\n========================= *\/\r\n\r\n.image-slider{\r\n  position:relative;\r\n  width:420px;\r\n  height:540px;   \/* portrait height *\/\r\n\r\n  border-radius:30px; \/* smooth corners instead of circle *\/\r\n  overflow:hidden;\r\n  z-index:2;\r\n\r\n  box-shadow:0 25px 45px rgba(0,0,0,0.18);\r\n}\r\n\r\n\/* Images *\/\r\n\r\n.slide-image{\r\n  position:absolute;\r\n  width:100%;\r\n  height:100%;\r\n  object-fit:cover;\r\n  inset:0;\r\n\r\n  opacity:0;\r\n\r\n  animation:fadeSlider 8s infinite;\r\n}\r\n\/* 2nd image delay *\/\r\n\r\n.slide-image:nth-child(2){\r\n  animation-delay:4s;\r\n}\r\n\r\n\r\n\r\n\/* =========================\r\n   RIGHT CONTENT\r\n========================= *\/\r\n\r\n.cake-content{\r\n  width:52%;\r\n}\r\n\r\n\/* Tag *\/\r\n\r\n.section-tag{\r\n  font-family:'Pacifico',cursive;\r\n  font-size:26px;\r\n  color:#ff4b8a;\r\n  margin-bottom:14px;\r\n  display:block;\r\n\r\n  animation:zoomText 1s ease;\r\n}\r\n\r\n\/* Heading *\/\r\n\r\n.cake-content h2{\r\n  font-family:'Montserrat',sans-serif;\r\n  font-size:30px;\r\n  line-height:1.25;\r\n  color:#0d4c81;\r\n  margin-bottom:20px;\r\n  font-weight:700;\r\n}\r\n\r\n\/* Main Text *\/\r\n\r\n.main-text{\r\n  font-size:14px;\r\n  line-height:1.9;\r\n  color:#6e6e6e;\r\n  margin-bottom:35px;\r\n  max-width:650px;\r\n}\r\n\r\n\/* =========================\r\n   GRID\r\n========================= *\/\r\n\r\n.stats-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:20px;\r\n}\r\n\r\n\/* Cards *\/\r\n\r\n.stat-card{\r\n  background:#eceff2;\r\n  padding:20px;\r\n  transition:0.3s ease;\r\n}\r\n\r\n.stat-card:hover{\r\n  transform:translateY(-6px);\r\n  background-color:#ff4b8a;\r\n  color:#f5f5f5;\r\n}\r\n\r\n\/* Numbers *\/\r\n\r\n.stat-card h3{\r\n  font-size:40px;\r\n  color:#ff4b8a;\r\n  margin-bottom:15px;\r\n  font-family:'Montserrat',sans-serif;\r\n}\r\n\r\n\r\n\/* Card Text *\/\r\n\r\n.stat-card p{\r\n  font-size:14px;\r\n  line-height:1.8;\r\n  color:#666;\r\n  margin-bottom:20px;\r\n}\r\n\r\n\/* Link *\/\r\n\r\n.stat-card a{\r\n  text-decoration:none;\r\n  color:#111;\r\n  font-size:14px;\r\n  font-weight:700;\r\n  border-bottom:2px solid #ff4b8a;\r\n  padding-bottom:3px;\r\n}\r\n\r\n\/* =========================\r\n   ANIMATIONS\r\n========================= *\/\r\n\r\n\/* Slider *\/\r\n\r\n@keyframes fadeSlider{\r\n\r\n  0%{\r\n    opacity:0;\r\n    transform:scale(1.08);\r\n  }\r\n\r\n  10%{\r\n    opacity:1;\r\n  }\r\n\r\n  45%{\r\n    opacity:1;\r\n    transform:scale(1);\r\n  }\r\n\r\n  55%{\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    opacity:0;\r\n  }\r\n\r\n}\r\n\r\n\/* Fruits *\/\r\n\r\n@keyframes floatFruit{\r\n\r\n  0%{\r\n    transform:translateY(0px);\r\n  }\r\n\r\n  50%{\r\n    transform:translateY(-10px);\r\n  }\r\n\r\n  100%{\r\n    transform:translateY(0px);\r\n  }\r\n\r\n}\r\n\r\n\/* Zoom Text *\/\r\n\r\n@keyframes zoomText{\r\n\r\n  0%{\r\n    transform:scale(0.5);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:scale(1);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   RESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:1200px){\r\n\r\n  .cake-showcase{\r\n    flex-direction:column;\r\n  }\r\n\r\n  .cake-images,\r\n  .cake-content{\r\n    width:100%;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:767px){\r\n\r\n  .cake-content h2{\r\n    font-size:34px;\r\n  }\r\n\r\n  .stats-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .image-slider{\r\n    width:300px;\r\n    height:300px;\r\n  }\r\n\r\n  .big-circle{\r\n    width:340px;\r\n    height:340px;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-982b8b9 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"982b8b9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e7dc39 elementor-widget elementor-widget-html\" data-id=\"6e7dc39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Google Fonts -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Pacifico&family=Montserrat:wght@500;700;800;900&family=Poppins:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- =========================\r\n     EXPERIENCE SECTION\r\n========================= -->\r\n\r\n<section class=\"experience-section\">\r\n\r\n  <div class=\"experience-content\">\r\n\r\n    <div class=\"experience-top-text\">\r\n      THE EXPERIENCE\r\n    <\/div>\r\n\r\n    <h1 class=\"experience-title\">\r\n      <span class=\"fast\">FAST<\/span>\r\n      <span class=\"casual\">CASUAL<\/span>\r\n    <\/h1>\r\n\r\n    <h2>\r\n      Elevated comfort.\r\n    <\/h2>\r\n\r\n    <p>\r\n      Croff-Wich is made for repeat visits and spontaneous cravings.\r\n      Whether you\u2019re grabbing a quick bite or settling in, expect bold\r\n      flavours, satisfying textures, and food that looks as good as it tastes.\r\n    <\/p>\r\n\r\n    <div class=\"experience-highlight\">\r\n      Fresh. Warm. Seriously crave-worthy.\r\n    <\/div>\r\n\r\n    <a href=\"#\" class=\"experience-btn\">\r\n      Discover More\r\n    <\/a>\r\n\r\n  <\/div>\r\n\r\n  <!-- Floating Croissants -->\r\n\r\n  <div class=\"float-item float-1\">\r\n    <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/Untitled-2.png\" alt=\"\">\r\n  <\/div>\r\n\r\n  <div class=\"float-item float-2\">\r\n    <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/w-1-scaled.png\" alt=\"\">\r\n  <\/div>\r\n\r\n  <div class=\"float-item float-3\">\r\n    <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/Untitled-2.png\" alt=\"\">\r\n  <\/div>\r\n\r\n  <!-- Bottom Wave -->\r\n\r\n  <div class=\"experience-wave\">\r\n    <svg viewBox=\"0 0 1440 320\" preserveAspectRatio=\"none\">\r\n      <path fill=\"#ffffff\"\r\n        d=\"M0,160L60,176C120,192,240,224,360,224C480,224,600,192,720,165.3C840,139,960,117,1080,133.3C1200,149,1320,203,1380,229.3L1440,256L1440,320L0,320Z\">\r\n      <\/path>\r\n    <\/svg>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\r\n\/* =========================\r\n   EXPERIENCE SECTION\r\n========================= *\/\r\n\r\n.experience-section{\r\n  position:relative;\r\n  overflow:hidden;\r\n  background:#fed5bf;\r\n  min-height:100vh;\r\n  display:flex;\r\n  align-items:center;\r\n  padding:100px 8%;\r\n  font-family:'Poppins',sans-serif;\r\n}\r\n\r\n\/* =========================\r\n   CONTENT\r\n========================= *\/\r\n\r\n.experience-content{\r\n  position:relative;\r\n  z-index:2;\r\n  max-width:720px;\r\n}\r\n\r\n\/* =========================\r\n   TOP TEXT\r\n========================= *\/\r\n\r\n.experience-top-text{\r\n  font-family:'Pacifico',cursive;\r\n  font-size:44px;\r\n  color:#ff5c8a;\r\n  margin-bottom:10px;\r\n  line-height:1;\r\n\r\n  animation:zoomIntro 1.2s ease forwards;\r\n}\r\n\r\n@keyframes zoomIntro{\r\n\r\n  0%{\r\n    transform:scale(2);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:scale(1);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   TITLE\r\n========================= *\/\r\n\r\n.experience-title{\r\n  font-family:'Montserrat',sans-serif;\r\n  font-size:65px;\r\n  font-weight:900;\r\n  text-transform:uppercase;\r\n  display:flex;\r\n  gap:1px;\r\n  margin:0 0 25px;\r\n  overflow:hidden;\r\n}\r\n\r\n\/* FAST *\/\r\n\r\n.experience-title .fast{\r\n  color:#d1782f;\r\n  animation:moveLeft 1.5s ease forwards;\r\n}\r\n\r\n\/* CASUAL *\/\r\n\r\n.experience-title .casual{\r\n  color:#b85c38;\r\n  animation:moveRight 1.5s ease forwards;\r\n}\r\n\r\n\/* Left Animation *\/\r\n\r\n@keyframes moveLeft{\r\n\r\n  0%{\r\n    transform:translateX(-500px);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:translateX(0);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n\/* Right Animation *\/\r\n\r\n@keyframes moveRight{\r\n\r\n  0%{\r\n    transform:translateX(500px);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:translateX(0);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   SUB TITLE\r\n========================= *\/\r\n\r\n.experience-content h2{\r\n  font-size:34px;\r\n  font-weight:700;\r\n  color:#4a2a1a;\r\n  margin-bottom:10px;\r\n}\r\n\r\n\/* =========================\r\n   DESCRIPTION\r\n========================= *\/\r\n\r\n.experience-content p{\r\n  font-family:'Montserrat',sans-serif;\r\n  font-size:19px;\r\n  line-height:1.9;\r\n  font-weight:500;\r\n  color:#ffffff;\r\n  max-width:620px;\r\n  margin-bottom:30px;\r\n  letter-spacing:0.3px;\r\n\r\n  text-shadow:\r\n    0 2px 8px rgba(0,0,0,0.12);\r\n}\r\n\r\n\/* =========================\r\n   HIGHLIGHT\r\n========================= *\/\r\n\r\n.experience-highlight{\r\n  font-size:24px;\r\n  font-weight:700;\r\n  color:#9a4d17;\r\n  margin-bottom:35px;\r\n}\r\n\r\n\/* =========================\r\n   BUTTON\r\n========================= *\/\r\n\r\n.experience-btn{\r\n  display:inline-block;\r\n  padding:16px 38px;\r\n  background:#b85c38;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:60px;\r\n  font-weight:600;\r\n  transition:0.3s ease;\r\n}\r\n\r\n.experience-btn:hover{\r\n  background:#ff5c8a;\r\n  transform:translateY(-4px);\r\n}\r\n\r\n\/* =========================\r\n   FLOATING IMAGES\r\n========================= *\/\r\n\r\n.float-item{\r\n  position:absolute;\r\n  z-index:1;\r\n\r\n  animation:\r\n    floating 6s ease-in-out infinite,\r\n    zoomInOut 4s ease-in-out infinite;\r\n}\r\n\r\n.float-item img{\r\n  width:100%;\r\n  display:block;\r\n  filter:drop-shadow(0 15px 30px rgba(0,0,0,0.18));\r\n}\r\n\r\n\/* Positions *\/\r\n\r\n.float-1{\r\n  width:260px;\r\n  right:7%;\r\n  top:12%;\r\n}\r\n\r\n.float-2{\r\n  width:190px;\r\n  right:20%;\r\n  top:50%;\r\n  animation-delay:1.5s;\r\n}\r\n\r\n.float-3{\r\n  width:130px;\r\n  right:5%;\r\n  top:72%;\r\n  animation-delay:3s;\r\n}\r\n\r\n\/* =========================\r\n   PREMIUM SAME STYLE ANIMATION\r\n========================= *\/\r\n\r\n.float-item{\r\n  position:absolute;\r\n  z-index:1;\r\n\r\n  \/* Same animation for all *\/\r\n  animation:premiumFloat 5s ease-in-out infinite;\r\n}\r\n\r\n.float-item img{\r\n  width:100%;\r\n  display:block;\r\n\r\n  filter:\r\n    drop-shadow(0 20px 35px rgba(0,0,0,0.16));\r\n\r\n  transition:0.4s ease;\r\n}\r\n\r\n\/* Positions *\/\r\n\r\n.float-1{\r\n  width:260px;\r\n  right:7%;\r\n  top:12%;\r\n  animation-delay:0s;\r\n}\r\n\r\n.float-2{\r\n  width:190px;\r\n  right:20%;\r\n  top:50%;\r\n  animation-delay:1.2s;\r\n}\r\n\r\n.float-3{\r\n  width:130px;\r\n  right:5%;\r\n  top:72%;\r\n  animation-delay:2.4s;\r\n}\r\n\r\n\/* =========================\r\n   PREMIUM FLOAT ANIMATION\r\n========================= *\/\r\n\r\n@keyframes premiumFloat{\r\n\r\n  0%{\r\n    transform:\r\n      translateY(0px)\r\n      rotate(0deg)\r\n      scale(1);\r\n  }\r\n\r\n  25%{\r\n    transform:\r\n      translateY(-18px)\r\n      rotate(4deg)\r\n      scale(1.04);\r\n  }\r\n\r\n  50%{\r\n    transform:\r\n      translateY(0px)\r\n      rotate(0deg)\r\n      scale(1.08);\r\n  }\r\n\r\n  75%{\r\n    transform:\r\n      translateY(18px)\r\n      rotate(-4deg)\r\n      scale(1.04);\r\n  }\r\n\r\n  100%{\r\n    transform:\r\n      translateY(0px)\r\n      rotate(0deg)\r\n      scale(1);\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   WAVE\r\n========================= *\/\r\n\r\n.experience-wave{\r\n  position:absolute;\r\n  bottom:-2px;\r\n  left:0;\r\n  width:100%;\r\n  line-height:0;\r\n}\r\n\r\n.experience-wave svg{\r\n  width:100%;\r\n  height:140px;\r\n  display:block;\r\n}\r\n\r\n\/* =========================\r\n   RESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:991px){\r\n\r\n  .experience-title{\r\n    font-size:72px;\r\n    gap:10px;\r\n  }\r\n\r\n  .experience-top-text{\r\n    font-size:34px;\r\n  }\r\n\r\n  .experience-content h2{\r\n    font-size:26px;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:767px){\r\n\r\n  .experience-section{\r\n    padding:90px 25px 140px;\r\n  }\r\n\r\n  .experience-title{\r\n    font-size:48px;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .experience-top-text{\r\n    font-size:26px;\r\n  }\r\n\r\n  .experience-content h2{\r\n    font-size:22px;\r\n  }\r\n\r\n  .experience-content p{\r\n    font-size:16px;\r\n  }\r\n\r\n  .experience-highlight{\r\n    font-size:20px;\r\n  }\r\n\r\n  .float-item{\r\n    opacity:0.5;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e03d4ac elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile e-flex e-con-boxed e-con e-parent\" data-id=\"e03d4ac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1d69b4f elementor-widget elementor-widget-html\" data-id=\"1d69b4f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Google Fonts -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Pacifico&family=Montserrat:wght@500;700;800;900&family=Poppins:wght@400;500;600&display=swap\" rel=\"stylesheet\">\r\n\r\n<!-- HERO SECTION -->\r\n<section class=\"croffwich-hero\">\r\n\r\n  <div class=\"hero-content\">\r\n\r\n    <div class=\"hero-top-text\">\r\n      Where Croissants Meet Waffles\r\n    <\/div>\r\n\r\n    <h1 class=\"hero-title\">\r\n  <span class=\"croff\">CROFF<\/span>\r\n  <span class=\"wich\">WICH<\/span>\r\n<\/h1>\r\n\r\n    <h2>\r\n      Comfort food, waffled to perfection.\r\n    <\/h2>\r\n\r\n   \r\n\r\n    <div class=\"hero-highlight\">\r\n      Flaky. Crispy. Unapologetically satisfying.\r\n    <\/div>\r\n\r\n    <a href=\"#\" class=\"hero-btn\">Explore Menu<\/a>\r\n\r\n  <\/div>\r\n\r\n  <!-- Floating Waffles -->\r\n  <div class=\"waffle waffle-1\">\r\n    <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/Untitled-2.png\" alt=\"Waffle\">\r\n  <\/div>\r\n\r\n  <div class=\"waffle waffle-2\">\r\n    <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/w-1-scaled.png\" alt=\"Waffle\">\r\n  <\/div>\r\n\r\n  <div class=\"waffle waffle-3\">\r\n    <img decoding=\"async\" src=\"https:\/\/croffwich.vyomtelosconsulting.com\/wp-content\/uploads\/2026\/05\/Untitled-2.png\" alt=\"Waffle\">\r\n  <\/div>\r\n\r\n  <!-- Bottom Wave -->\r\n  <div class=\"wave\">\r\n    <svg viewBox=\"0 0 1440 320\" preserveAspectRatio=\"none\">\r\n      <path fill=\"#ffffff\"\r\n        d=\"M0,192L60,176C120,160,240,128,360,128C480,128,600,160,720,186.7C840,213,960,235,1080,218.7C1200,203,1320,149,1380,122.7L1440,96L1440,320L0,320Z\">\r\n      <\/path>\r\n    <\/svg>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<style>\r\n\r\n\/* =========================\r\n   HERO SECTION\r\n========================= *\/\r\n\r\n.croffwich-hero{\r\n  position:relative;\r\n  overflow:hidden;\r\n  background:#c1e5ff;\r\n  min-height:100vh;\r\n  display:flex;\r\n  align-items:center;\r\n  padding:100px 8%;\r\n  font-family:'Poppins',sans-serif;\r\n}\r\n\r\n\/* =========================\r\n   CONTENT\r\n========================= *\/\r\n.paragraph{\r\n      font-family:'Pacifico',cursive;\r\n     \r\n}\r\n.hero-content{\r\n  position:relative;\r\n  z-index:2;\r\n  max-width:700px;\r\n}\r\n\r\n.hero-top-text{\r\n  font-family:'Pacifico',cursive;\r\n  font-size:48px;\r\n  color:#ff4b8a;\r\n  margin-bottom:20px;\r\n  line-height:1.2;\r\n\r\n  \/* Animation *\/\r\n  animation:zoomIntro 1.4s ease forwards;\r\n}\r\n\r\n\/* Zoom In -> Normal Size *\/\r\n\r\n@keyframes zoomIntro{\r\n\r\n  0%{\r\n    transform:scale(0.2);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:scale(1);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n.hero-content h1{\r\n  font-family:'Montserrat',sans-serif;\r\n  font-size:70px;\r\n  line-height:0.9;\r\n  font-weight:900;\r\n  color:#5d9bd3;\r\n  letter-spacing:2px;\r\n  margin:0 0 25px;\r\n  text-transform:uppercase;\r\n}\r\n\r\n.hero-content h1 span{\r\n  color:#3f7db7;\r\n}\r\n\r\n\/* =========================\r\n   TITLE ANIMATION\r\n========================= *\/\r\n\r\n.hero-title{\r\n  font-family:'Montserrat',sans-serif;\r\n  font-size:110px;\r\n  font-weight:900;\r\n  text-transform:uppercase;\r\n  margin:0 0 30px;\r\n  display:flex;\r\n  align-items:center;\r\n  gap:18px;\r\n  overflow:hidden;\r\n}\r\n\r\n\/* CROFF *\/\r\n\r\n.hero-title .croff{\r\n  color:#5d9bd3;\r\n  display:inline-block;\r\n  animation:moveLeft 1.5s ease forwards;\r\n}\r\n\r\n\/* WICH *\/\r\n\r\n.hero-title .wich{\r\n  color:#5d9bd3;\r\n  display:inline-block;\r\n  animation:moveRight 1.5s ease forwards;\r\n}\r\n\r\n\/* LEFT TO CENTER *\/\r\n\r\n@keyframes moveLeft{\r\n\r\n  0%{\r\n    transform:translateX(-500px);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:translateX(0);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n\/* RIGHT TO CENTER *\/\r\n\r\n@keyframes moveRight{\r\n\r\n  0%{\r\n    transform:translateX(500px);\r\n    opacity:0;\r\n  }\r\n\r\n  100%{\r\n    transform:translateX(0);\r\n    opacity:1;\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   RESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:991px){\r\n\r\n  .hero-title{\r\n    font-size:72px;\r\n    gap:12px;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:767px){\r\n\r\n  .hero-title{\r\n    font-size:48px;\r\n    gap:8px;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n}\r\n.hero-content h2{\r\n  font-size:32px;\r\n  font-weight:700;\r\n  color:#222;\r\n  margin-bottom:25px;\r\n}\r\n\r\n.hero-content p{\r\n  font-size:18px;\r\n  line-height:1.8;\r\n  color:#ff4b8a;\r\n  max-width:600px;\r\n  margin-bottom:30px;\r\n}\r\n\r\n.hero-highlight{\r\n  font-size:24px;\r\n  font-weight:700;\r\n  color:#9a5b00;\r\n  margin-bottom:35px;\r\n}\r\n\r\n\/* =========================\r\n   BUTTON\r\n========================= *\/\r\n\r\n.hero-btn{\r\n  display:inline-block;\r\n  padding:16px 36px;\r\n  background:#5d9bd3;\r\n  color:#fff;\r\n  text-decoration:none;\r\n  border-radius:60px;\r\n  font-weight:600;\r\n  transition:0.3s ease;\r\n}\r\n\r\n.hero-btn:hover{\r\n  background:#ff4b8a;\r\n  transform:translateY(-4px);\r\n}\r\n\r\n\/* =========================\r\n   FLOATING WAFFLES\r\n========================= *\/\r\n\r\n.waffle{\r\n  position:absolute;\r\n  z-index:1;\r\n  animation:\r\n    floating 6s ease-in-out infinite,\r\n    zoomInOut 4s ease-in-out infinite;\r\n  transform-origin:center;\r\n}\r\n\r\n.waffle img{\r\n  width:100%;\r\n  display:block;\r\n  filter:drop-shadow(0 15px 30px rgba(0,0,0,0.18));\r\n}\r\n\r\n\/* Positions *\/\r\n\r\n.waffle-1{\r\n  width:300px;\r\n  right:7%;\r\n  top:15%;\r\n  animation-delay:0s;\r\n}\r\n\r\n.waffle-2{\r\n  width:250px;\r\n  right:20%;\r\n  top:50%;\r\n  animation-delay:1.5s;\r\n}\r\n\r\n.waffle-3{\r\n  width:160px;\r\n  right:5%;\r\n  top:70%;\r\n  animation-delay:3s;\r\n}\r\n\r\n\/* =========================\r\n   FLOATING ANIMATION\r\n========================= *\/\r\n\r\n@keyframes floating{\r\n\r\n  0%{\r\n    transform:translateY(0px) rotate(0deg);\r\n  }\r\n\r\n  25%{\r\n    transform:translateY(-15px) rotate(5deg);\r\n  }\r\n\r\n  50%{\r\n    transform:translateY(0px) rotate(-5deg);\r\n  }\r\n\r\n  75%{\r\n    transform:translateY(12px) rotate(4deg);\r\n  }\r\n\r\n  100%{\r\n    transform:translateY(0px) rotate(0deg);\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   ZOOM IN \/ OUT\r\n========================= *\/\r\n\r\n@keyframes zoomInOut{\r\n\r\n  0%{\r\n    scale:1;\r\n  }\r\n\r\n  50%{\r\n    scale:1.12;\r\n  }\r\n\r\n  100%{\r\n    scale:1;\r\n  }\r\n\r\n}\r\n\r\n\/* =========================\r\n   BOTTOM WAVE\r\n========================= *\/\r\n\r\n.wave{\r\n  position:absolute;\r\n  bottom:-2px;\r\n  left:0;\r\n  width:100%;\r\n  line-height:0;\r\n}\r\n\r\n.wave svg{\r\n  width:100%;\r\n  height:140px;\r\n  display:block;\r\n}\r\n\r\n\/* =========================\r\n   RESPONSIVE\r\n========================= *\/\r\n\r\n@media(max-width:991px){\r\n\r\n  .hero-content h1{\r\n    font-size:72px;\r\n  }\r\n\r\n  .hero-top-text{\r\n    font-size:36px;\r\n  }\r\n\r\n  .hero-content h2{\r\n    font-size:26px;\r\n  }\r\n\r\n  .waffle-1{\r\n    width:150px;\r\n  }\r\n\r\n  .waffle-2{\r\n    width:110px;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:767px){\r\n\r\n  .croffwich-hero{\r\n    padding:90px 25px 140px;\r\n  }\r\n\r\n  .hero-content h1{\r\n    font-size:52px;\r\n  }\r\n\r\n  .hero-top-text{\r\n    font-size:28px;\r\n  }\r\n\r\n  .hero-content h2{\r\n    font-size:22px;\r\n  }\r\n\r\n  .hero-content p{\r\n    font-size:16px;\r\n  }\r\n\r\n  .hero-highlight{\r\n    font-size:20px;\r\n  }\r\n\r\n  .waffle{\r\n    opacity:0.5;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Where Croissants Meet Waffles CROFF WICH Comfort food, waffled to perfection. Flaky. Crispy. Unapologetically satisfying. Explore Menu Familiar enough to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/croffwich.vyomtelosconsulting.com\/index.php?rest_route=\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/croffwich.vyomtelosconsulting.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/croffwich.vyomtelosconsulting.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/croffwich.vyomtelosconsulting.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/croffwich.vyomtelosconsulting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=61"}],"version-history":[{"count":5,"href":"https:\/\/croffwich.vyomtelosconsulting.com\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/croffwich.vyomtelosconsulting.com\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions\/141"}],"wp:attachment":[{"href":"https:\/\/croffwich.vyomtelosconsulting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}