.main { background-color: #f5e6d3; color: var(--color-text-light); min-height: 100vh; } .hero { padding: 200px 0px; background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/images/inner-banners/catering-banner.webp'); background-size: cover; background-position: center; /* background-attachment: fixed; */ text-align: center; } .heroContent { max-width: 800px; margin: 0 auto; } .heroTitle { font-family: var(--font-playfair); font-size: var(--hero-title-size); color: #d3cab3; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; } .breadcrumb { font-size: 1.2rem; color: var(--color-paragraph); font-family: var(--font-lato); letter-spacing: 1px; } .breadcrumb a { color: #d3cab3; transition: color 0.3s; text-decoration: none; } .breadcrumb a:hover { color: var(--color-gold); } @media (max-width: 768px) { .heroTitle { font-size: 48px; } .hero { padding: 150px 20px; } } /* ============================================ TOP SECTION - 3 CARDS ============================================ */ .topSection { padding: 80px 20px 80px; background-color: #f5e6d3; } .topContainer { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .topHeading { text-align: center; margin-bottom: 60px; } .topLabel { display: block; font-size: 14px; color: #8b7355; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 15px; font-weight: 600; font-family: var(--font-lato); } .sectionHeading1 { padding: 0; max-width: 100%; margin: 0; text-align: left; } .smallHeading1 { font-size: var(--small-text-size); color: var(--color-paragraph); font-family: var(--font-lato); font-weight: 600; letter-spacing: 2px; margin-bottom: 1rem; } .mainHeading1 { font-family: var(--font-playfair); font-size: var(--main-heading-size); color: #5d4037; line-height: 1.3; font-weight: 700; margin-bottom: 1.5rem; } .description1 { font-size: var(--body-size); color: var(--color-alterparagraph) !important; line-height: 1.8; font-family: var(--font-lato); /* max-width: 800px; */ margin: 0 auto; } .sectionHeading3 { max-width: 900px; margin: 0 auto; text-align: center; } .smallHeading3 { font-size: var(--small-text-size); color: var(--color-paragraph); font-family: var(--font-lato); font-weight: 600; letter-spacing: 2px; margin-bottom: 1rem; } .mainHeading3 { font-family: var(--font-playfair); font-size: var(--main-heading-size); color: #5d4037; line-height: 1.3; font-weight: 700; margin-bottom: 1.5rem; } .description3 { font-size: var(--body-size); color: var(--color-paragraph); line-height: 1.8; font-family: var(--font-lato); /* max-width: 800px; */ margin: 0 auto; } .topCardsGrid { display: grid; grid-template-columns: 1fr; gap: 30px; } .topCard { position: relative; height: 140px; /* Adjusted container height */ overflow: hidden; cursor: pointer; transition: transform 0.4s ease, box-shadow 0.4s ease; border-radius: 30 30 30 30px; /* Rounded only at Bottom-Left to emphasize L shape */ border: none; border-right: 8px solid #b07c4b; border-top: 8px solid #b07c4b; } .topCard:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); } .topCardImage { position: relative; width: 100%; height: 100%; /* Image takes full height of the card, effectively 100% of 350px which is reduced from original */ transition: transform 0.6s ease; } .topCard:hover .topCardImage { transform: scale(1.1); } .topCardOverlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)); z-index: 1; } .topCardContent { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s ease; } .topCard:hover .topCardContent { transform: translateX(-10px); } .topCardTitle { font-family: var(--font-playfair); font-size: 36px; color: #d3cab3; font-weight: 700; /* margin-bottom: 30px; */ text-transform: capitalize; font-style: italic; line-height: 1.2; } .topCardButton { width: 50px; height: 50px; border-radius: 50%; background-color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; font-size: 24px; color: #2d2d2d; } .topCardButton:hover { background-color: #d3cab3; transform: scale(1.1); } @media (max-width: 991px) { .topCardsGrid { grid-template-columns: 1fr; } .topContainer { grid-template-columns: 1fr; gap: 60px; } .sectionHeading1 { text-align: center; margin-bottom: 40px; } .smallHeading1 { justify-content: center !important; /* Force center on mobile */ } .topTitle { font-size: 40px; } } @media (max-width: 767px) { .topCardsGrid { grid-template-columns: 1fr; gap: 20px; } .topCard { height: 180px; } .topTitle { font-size: 32px; } .topCardTitle { font-size: 28px; } } /* ============================================ WELCOME SECTION (WITH SLIDER) ============================================ */ .welcomeSection { padding: 80px 20px; background-color: #ffffff; background-image: url('/images/about-us/guest-bg.webp'); } .welcomeContainer { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .welcomeImagesWrapper { position: relative; height: 550px; } /* Slider Styles */ .sliderContainer { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); } .sliderWrapper { position: relative; width: 100%; height: 100%; } .sliderSlide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease-in-out; z-index: 0; } .sliderSlideActive { opacity: 1; z-index: 1; } .sliderSlide img { transition: transform 0.6s ease; } .sliderContainer:hover .sliderSlideActive img { transform: scale(1.05); } /* Navigation Arrows */ .sliderArrow { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background-color: rgba(211, 202, 179, 0.9); border: 2px solid var(--color-border); color: #5d4037; font-size: 24px; font-weight: bold; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .sliderArrow:hover { background-color: var(--color-button); color: #fff; transform: translateY(-50%) scale(1.1); } .sliderArrowLeft { left: 20px; } .sliderArrowRight { right: 20px; } /* Slide Indicators */ .sliderIndicators { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; } .sliderIndicator { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: 2px solid var(--color-border); cursor: pointer; transition: all 0.3s ease; padding: 0; } .sliderIndicator:hover { background-color: rgba(255, 255, 255, 0.8); transform: scale(1.2); } .sliderIndicatorActive { background-color: var(--color-button); transform: scale(1.3); } .welcomeContent { padding: 25px; } .welcomeLabel { display: block; font-size: 13px; color: #8b7355; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; font-weight: 600; font-family: var(--font-lato); } .welcomeTitle { font-family: var(--font-playfair); font-size: 52px; color: #2d2d2d; font-weight: 400; line-height: 1.3; margin-bottom: 30px; } .welcomeDivider { margin-bottom: 35px; display: flex; justify-content: flex-start; } .welcomeDescription { font-size: var(--body-size); color: var(--color-paragraph); line-height: 1.8; font-family: var(--font-lato); /* max-width: 800px; */ margin: 0 auto; } .mainHeading { font-family: var(--font-playfair); font-size: var(--main-heading-size); color: #5d4037; line-height: 1.3; font-weight: 700; margin-bottom: 1.5rem; } .smallHeading { font-size: var(--small-text-size); color: var(--color-paragraph); font-family: var(--font-lato); font-weight: 600; letter-spacing: 2px; margin-bottom: 1rem; } .mainHeadingSection { font-family: var(--font-playfair); color: var(--color-paragraph); /* text-transform: uppercase; */ letter-spacing: 2px; margin-bottom: 20px; } .welcomeSignature { text-align: left; } .welcomeSignatureLabel { display: block; font-size: 11px; color: #8b7355; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; font-weight: 600; font-family: var(--font-lato); } .welcomeSignatureName { font-family: 'Dancing Script', cursive; font-size: 48px; color: #2d2d2d; font-weight: 400; } @media (max-width: 991px) { .welcomeContainer { grid-template-columns: 1fr; gap: 60px; } .welcomeImagesWrapper { height: 450px; max-width: 100%; width: 100%; margin: 0 auto; order: 1; } .welcomeContent { padding: 20px 0; order: 2; } .sliderArrow { width: 45px; height: 45px; font-size: 20px; } .sliderArrowLeft { left: 15px; } .sliderArrowRight { right: 15px; } .welcomeTitle { font-size: 44px; } } @media (max-width: 767px) { .welcomeSection { padding: 80px 15px; } .welcomeContainer { gap: 40px; } .welcomeImagesWrapper { height: 400px; } .sliderArrow { width: 40px; height: 40px; font-size: 18px; } .sliderArrowLeft { left: 10px; } .sliderArrowRight { right: 10px; } .sliderIndicators { bottom: 15px; gap: 8px; } .sliderIndicator { width: 10px; height: 10px; } .welcomeTitle { font-size: 36px; } .welcomeSignatureName { font-size: 40px; } } @media (max-width: 480px) { .welcomeImagesWrapper { height: 350px; } .sliderArrow { width: 35px; height: 35px; font-size: 16px; } .sliderArrowLeft { left: 8px; } .sliderArrowRight { right: 8px; } .sliderIndicators { bottom: 12px; gap: 6px; } .sliderIndicator { width: 8px; height: 8px; border-width: 1px; } .welcomeTitle { font-size: 32px; } .welcomeDescription { font-size: 15px; } .welcomeSignatureName { font-size: 36px; } } /* ============================================ SERVING SECTION ============================================ */ .servingSection { padding: 80px 20px; background-color: #f5e6d3; } .servingContainer { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .servingContent { padding: 40px; } .servingLabel { display: block; font-size: 12px; color: #b8a88a; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; font-weight: 600; font-family: var(--font-lato); } .servingTitle { font-family: var(--font-playfair); font-size: 52px; color: #ffffff; font-weight: 400; line-height: 1.3; margin-bottom: 30px; } .servingDescription { font-size: var(--body-size); color: var(--color-alterparagraph) !important; line-height: 1.8; font-family: var(--font-lato); /* max-width: 800px; */ margin: 0 auto; } .servingSignature { margin-top: 40px; } .servingSignatureName { font-family: 'Dancing Script', cursive; font-size: 56px; color: #d3cab3; font-weight: 400; margin-bottom: 5px; } .servingSignatureTitle { font-size: 15px; color: #ffffff; font-family: var(--font-lato); } .servingImagesWrapper { position: relative; } .servingImagesContainer { position: relative; height: 600px; width: 100%; } .servingImageBack { position: absolute; top: 0; right: 0; width: 70%; height: 85%; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); z-index: 1; } .servingImageFront { position: absolute; bottom: 50px; left: 0; width: 50%; height: 50%; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); z-index: 2; border: 8px solid #f5e6d3; /* Match background color for cutout effect */ } .servingBadge { position: absolute; bottom: 0; /* Align with bottom of front image roughly */ left: 40%; /* Position to bridge the images or at center */ transform: translateX(-50%); width: 150px; height: 150px; background-color: #c49c5c; /* Gold theme color */ border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; z-index: 3; border: 8px solid #f5e6d3; /* Match background */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); text-align: center; } .badgeNumber { font-family: var(--font-playfair); font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 5px; } .badgeText { font-family: var(--font-lato); font-size: 14px; font-weight: 600; text-transform: uppercase; line-height: 1.2; max-width: 80%; } .servingImageBack img, .servingImageFront img { transition: transform 0.6s ease; } .servingImagesContainer:hover .servingImageBack img, .servingImagesContainer:hover .servingImageFront img { transform: scale(1.05); } @media (max-width: 991px) { .servingContainer { grid-template-columns: 1fr; gap: 60px; } .servingImagesContainer { height: 500px; } .servingTitle { font-size: 44px; } .servingContent { padding: 20px 0; } .servingSignatureName { font-size: 48px; } } @media (max-width: 767px) { .servingSection { padding: 80px 15px; } .servingContainer { gap: 40px; } .servingImagesContainer { height: 400px; } .servingBadge { width: 120px; height: 120px; } .badgeNumber { font-size: 24px; } .badgeText { font-size: 11px; } .servingTitle { font-size: 36px; } .servingDescription { font-size: 15px; } .servingSignatureName { font-size: 40px; } .servingSignatureTitle { font-size: 13px; } } @media (max-width: 480px) { .servingImagesContainer { height: 350px; } .servingBadge { width: 100px; height: 100px; bottom: -20px; } .servingTitle { font-size: 32px; } .servingDescription { font-size: 14px; margin-bottom: 20px; } .servingSignatureName { font-size: 36px; } .servingSignatureTitle { font-size: 12px; } } /* ============================================ STORY SECTION ============================================ */ .storySection { padding: 100px 20px; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/images/catering/bring-authentic.webp'); background-size: cover; background-position: center; background-attachment: fixed; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; } .storyContent { max-width: 800px; margin: 0 auto; } .storyLabel { display: block; font-size: 14px; color: #d3cab3; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; font-weight: 600; font-family: var(--font-lato); } .storyTitle { font-family: var(--font-playfair); font-size: 64px; color: #d3cab3; font-weight: 700; line-height: 1.2; margin-bottom: 50px; text-transform: capitalize; } .storydesc { font-family: var(--font-playfair); font-size: 32px; color: #d3cab3; font-weight: 700; line-height: 1.2; margin-bottom: 50px; text-transform: capitalize; } .storyButton { display: inline-flex; align-items: center; gap: 15px; padding: 18px 40px; background-color: #fff; color: #2d2d2d; border: none; font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.4s ease; font-family: var(--font-lato); } .storyButton:hover { background-color: #d3cab3; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .storyButtonIcon { width: 30px; height: 30px; border-radius: 50%; background-color: #2d2d2d; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.3s ease; } .storyButton:hover .storyButtonIcon { background-color: #fff; color: #2d2d2d; transform: rotate(45deg); } @media (max-width: 768px) { .storySection { padding: 150px 20px; } .storyTitle { font-size: 42px; } .storyButton { padding: 15px 30px; font-size: 14px; } } @media (max-width: 480px) { .storyTitle { font-size: 32px; } } /* ============================================ ABOUT SECTION ============================================ */ .aboutSection { padding: 80px 20px; background-color: #f5e6d3; } .aboutContainer { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .aboutImagesWrapper { position: relative; } .aboutImagesGrid { position: relative; height: 600px; display: block; /* Changed from grid to allow absolute positioning of children */ } .aboutImageLarge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 65%; height: 75%; z-index: 1; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); } .aboutImageSmallTop { position: absolute; top: 0; right: 0; width: 45%; height: 45%; z-index: 2; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); border: 5px solid #f5e6d3; /* Match background color for separation */ } .aboutImageSmallBottom { position: absolute; bottom: 0; left: 0; width: 45%; height: 45%; z-index: 2; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); border: 5px solid #f5e6d3; /* Match background color for separation */ } .aboutImageLarge img, .aboutImageSmallTop img, .aboutImageSmallBottom img { transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .aboutImagesGrid:hover .aboutImageLarge img { transform: translate(-0%, -0%) scale(1.05); /* Maintain centering while scaling */ } .aboutImagesGrid:hover .aboutImageSmallTop img, .aboutImagesGrid:hover .aboutImageSmallBottom img { transform: scale(1.1); } .aboutContent { padding: 40px; } .aboutSpecials { margin-top: 30px; } .aboutSpecialsList { list-style: none; padding: 0; margin: 0; } .aboutSpecialsItem { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; font-size: var(--body-size); color: var(--color-alterparagraph) !important; font-family: var(--font-lato); line-height: 1.6; } .aboutSpecialsIcon { color: var(--color-button); font-weight: bold; font-size: 20px; flex-shrink: 0; } .lastButton { color: var(--color-alterparagraph) !important; font-family: var(--font-lato); text-transform: uppercase; letter-spacing: 1px; background: none; border: 2px solid #b07c4b; margin-top: 1rem; padding: 15px 40px; font-size: 1.1rem; text-decoration: none; transition: all .3s; display: inline-block; } .lastButton:hover { background-color: #c49c5c; color: #fff !important; transform: translateY(-2px); /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); */ } @media (max-width: 991px) { .aboutContainer { grid-template-columns: 1fr; gap: 60px; } .aboutImagesGrid { height: 500px; } .aboutImageLarge { width: 70%; height: 70%; } .aboutImageSmallTop, .aboutImageSmallBottom { width: 40%; height: 40%; } .aboutContent { padding: 20px 0; } } @media (max-width: 767px) { .aboutSection { padding: 80px 15px; } .aboutContainer { gap: 40px; } .aboutImagesGrid { height: 400px; gap: 15px; } .aboutSpecialsItem { font-size: 15px; } } @media (max-width: 480px) { .aboutImagesGrid { height: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 15px; margin-bottom: 30px; } .aboutImageLarge { position: relative; top: auto; left: auto; transform: none; width: 100%; height: 300px; grid-column: 1 / -1; grid-row: 1; border-radius: 15px; } .aboutImageSmallTop { position: relative; top: auto; right: auto; width: 100%; height: 200px; grid-column: 1; grid-row: 2; border-radius: 15px; border: none; } .aboutImageSmallBottom { position: relative; bottom: auto; left: auto; width: 100%; height: 200px; grid-column: 2; grid-row: 2; border-radius: 15px; border: none; } .aboutImagesGrid:hover .aboutImageLarge img { transform: scale(1.05); } .aboutSpecialsItem { font-size: 14px; margin-bottom: 15px; } }