/* General Body & Font Styling */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Add this to your main CSS file */
html {
    scroll-behavior: smooth;
}


.ccb-footer-copyright a{
    text-decoration: none;
    color: white;
}
 


body {
    font-family: 'Open Sans', sans-serif; /* Default body font */
    color: #333;
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll due to parallax */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif; /* Headings use Poppins */
    color: #333;
}


/* HERO CAKE START */
/* HERO CAKE START */

/* Hero Section */
.ccb-hero-section {
    background-color: #F8F0EC; /* Light background color from image */
    height: 92vh; /* Desktop: Take full viewport height */
    display: flex;
    flex-direction: column; /* Allows content and fixed elements to stack */
    align-items: center;
    justify-content: flex-start; /* Align content to the top initially */
    position: relative; /* KEY: This is the positioning context for absolute children */
    overflow: hidden; /* Crucial for parallax elements */
    padding-top: 50px; /* Space from header to push content down */
    padding-bottom: 0; /* Remove bottom padding as cake is positioned absolutely */
}

.ccb-hero-content-container {
    z-index: 100; /* Ensure content is always on top */
    position: relative; /* Important for z-index to work against other positioned elements */
    padding: 20px; /* Add some padding for mobile safety */
    max-width: 90%; /* Prevent content from stretching too wide */
    text-align: center;
    flex-grow: 1; /* Allows content to take available vertical space, pushing fixed-elements down */
    display: flex;
    flex-direction: column;
    margin-bottom: 190px;
    align-items: center;
    justify-content: center; /* Center content vertically within its available space */
}

.ccb-hero-heading {
    font-family: 'Poppins', sans-serif;
    margin-bottom: 30px;
    font-size: 3.5rem; /* Desktop: Large heading */
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.hero-text-top {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 28px; /* Desktop base size */
    color: #c57676;
    font-weight: 600;
}

.hero-highlight {
    font-size: 90px; /* Desktop base size */
    font-weight: 800;
    color: #ff2d55; /* Bright pink/red */
    line-height: 0.8;
    font-family: "otomanopee-one", sans-serif;
    font-style: normal;
}

/* Your ccb-order-button and phone-icon styles */
.ccb-order-button {
    background: linear-gradient(0deg, #5FC9A6 -7.69%, #158E52 83.71%);
    color: #fff;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 18px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 15px;
    transition: background 0.3s ease, transform 0.2s ease;
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 101; /* Ensure button is above everything */
}

.ccb-order-button:hover {
    background: linear-gradient(0deg, #158E52 -7.69%, #5FC9A6 83.71%); /* Slight change on hover */
    transform: translateY(-2px);
}

.ccb-order-button .phone-icon {
    background-color: #ffffff;
    color: #34c759;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Fixed Elements (Cake & Splash) - Now absolute within the hero section */
.ccb-hero-fixed-elements {
    position: absolute; /* KEY CHANGE: Absolute to .ccb-hero-section */
    bottom: 0; /* Positioned at the bottom of the hero section */
    left: 0;
    width: 100%;
    height: auto;
    z-index: 50; /* Above parallax but below content */
    display: flex;
    justify-content: center; /* Center the cake horizontally */
    align-items: flex-end; /* Align to the bottom of this container */
    pointer-events: none; /* Allows clicks through */
}

.ccb-main-cake-img {
    position: relative; /* Relative to its flex parent (.ccb-hero-fixed-elements) */
    max-width: 25%; /* Adjust size of the cake for desktop */
    z-index: 55; /* Above splashes if they are in the same fixed element */
    /* No JS transform needed for its base position here, only mouse/scroll parallax from JS */
}

.bgoverlay {
    position: relative; /* Relative to its flex parent (.ccb-hero-fixed-elements) */
    max-width: 100%; /* Adjust size of the cake for desktop */
    z-index: -90; /* Above splashes if they are in the same fixed element */
    /* No JS transform needed for its base position here, only mouse/scroll parallax from JS */
}

.ccb-milk-splash-left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1; /* Keep this minimal */
    opacity: 1;
}
/* If you have a separate right splash, uncomment and adjust: */
/*
.ccb-milk-splash-right {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    height: auto;
    z-index: 45;
    opacity: 0.8;
}
*/


/* Parallax Elements Container */
.ccb-parallax-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform-style: preserve-3d;
    z-index: 3;
}

/* Base style for all parallax assets */
.ccb-parallax-asset {
    position: absolute;
    will-change: transform; /* Optimize for animation */
}

/* Specific positioning and sizing for parallax assets (Desktop) */
/* Strawberries (in front, little bigger) */
.ccb-strawberry-top-left {
    width: 236px; /* Bigger size */
    top: 15%;
    left: 5%;
}

.ccb-strawberry-bottom-right {
    width: 150px; /* Bigger size */
    bottom: 90%;
    right: 85%;
}

/* Blackberries (slightly smaller than strawberries) */
.ccb-blackberry-top-left {
    width: 140px; /* Smaller than strawberries */
    top: 45%;
    left: 3%;
}

.ccb-blackberry-top-right {
    width: 228px; /* Smaller than strawberries */
    top: 18%;
    right: 5%;
}

/* Other elements */
.ccb-pistachio-bottom-left {
    width: 110px; /* Consistent size */
    bottom: 25%;
    left: 75%;
}

.ccb-almond-top-right {
    width: 100px; /* Consistent size */
    top: 80%;
    left: 15%;
}

.ccb-blackberry-topcorner-right {
    width: 280px; /* Consistent size */
    top: 50%;
    right: -2%;
}

.ccb-strawberry-bottomcorner-right {
    width: 100px; /* Consistent size */
    bottom: -5%;
    right: 30%;
}

.ccb-strawberry-top-leftout {
    width: 250px; /* Consistent size */
    bottom: -5%;
    left: -5%;
}


/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) {
    /* Adjustments for tablets/smaller desktops */
    .ccb-hero-heading {
        font-size: 3rem;
    }
    .hero-text-top {
        font-size: 26px;
    }
    .hero-highlight {
        font-size: 50px;
    }
    .ccb-main-cake-img {
        max-width: 70%;
        margin-right: -5%; /* Adjust for tablet */
    }

    /* Adjust parallax sizes slightly */
    .ccb-strawberry-top-left { width: 160px; }
    .ccb-strawberry-bottom-right { width: 130px; }
    .ccb-blackberry-top-left { width: 110px; }
    .ccb-blackberry-top-right { width: 120px; }
    .ccb-pistachio-bottom-left { width: 90px; }
    .ccb-almond-top-right { width: 80px; }
}

@media (max-width: 767.98px) { /* Mobile View */
    .ccb-hero-section {
        height: 80vh; /* Adjust height for mobile, e.g., 80% of viewport height */
        justify-content: flex-start; /* Align content to top for better visibility */
        padding-top: 80px; /* More padding from top on mobile */
        padding-bottom: 0; /* Remove bottom padding from hero section itself */
    }
    .ccb-hero-content-container {
        padding-top: 0;
        padding-bottom: 20px; /* Keep some space below content */
        max-width: 100%;
        justify-content: flex-start; /* Align content to top of available space */
    }
    .ccb-hero-heading {
        font-size: 2.5rem;
    }
    .hero-text-top {
        font-size: 22px;
    }
    .hero-highlight {
        font-size: 42px;
    }
    .ccb-order-button {
        font-size: 16px;
        padding: 12px 20px;
    }

    /* FIX: Hide all ccb-parallax-asset elements on mobile */
    .ccb-parallax-asset {
        display: none !important; /* Use !important to ensure override if other rules are very specific */
    }

    /* Cake positioning for mobile, still absolute to hero */
    .ccb-main-cake-img {
        max-width: 100%; /* Make cake larger on smaller screens */
        margin-right: 0; /* Remove any desktop margin-right */
        /* Flexbox in fixed-elements container will center it horizontally */
    }

    /* Ensure splash is visible and positioned */
    .ccb-milk-splash-left {
        display: block; /* Ensure visibility */
       
     
        bottom: 0;
        height: 100%;
        opacity: 1; /* Ensure full opacity */
        z-index: 0; /* Adjust if it needs to be behind/in front of cake */
    }
    /* If you have a right splash, make sure to adjust its mobile width/position too */
    /* Assuming .bgoverlay is a splash image or related, ensure it's not hidden either */
    .bgoverlay {
        display: block;
        z-index: 1; /* Adjust if it needs to be behind/in front of cake/other splash */
    }

}

@media (max-width: 575.98px) {
    .ccb-hero-section {
        height: 70vh; /* Even shorter for very small screens */
    }
    .ccb-hero-heading {
        font-size: 2rem;
    }
    .hero-text-top {
        font-size: 30px;
     
    }
    .hero-highlight {
        font-size: 66px;
    }
    .ccb-order-button {
        padding: 10px 25px;
        font-size: 1rem;
    }
    /* Cake specific adjustments for very small screens */
    .ccb-main-cake-img {
        max-width: 110%; /* Can make it even larger if it fits the design */
    }
}
/* HERO CAKE END */













 


















  



.herotitle{
    width: 50%;
    padding: 20px;
}
/* Initial Header Styles - Default for mobile first, then adjust for desktop */
.ccb-header-wrapper {
    position: relative; /* Default for smaller screens */
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    background-color: #fff; /* Default white background for mobile */
    padding-top: 0; /* Adjust as needed for mobile */
}

.ccb-header-wrapper .navbar {
    background-color: #fff; /* Default white background for mobile */
}

/* --- */
/* Desktop-specific styles for the transparent header (on top of hero) */
@media (min-width: 992px) { /* Bootstrap's 'lg' breakpoint for desktops */
    .ccb-header-wrapper {
        position: absolute; /* Make header absolute for desktop only */
        background: none; /* Make header transparent for desktop only */
        padding-top: 20px; /* Re-apply desktop padding */
    }

    .ccb-header-wrapper .navbar {
        background: none; /* Make navbar transparent for desktop only */
    }
}

/* Sticky Header Styles - this class will be added by JavaScript on scroll */
/* These styles should apply regardless of screen size when 'sticky-header' is active */
.ccb-header-wrapper.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff; /* White background when sticky */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding-top: 0; /* Remove padding when sticky */
}

/* Hero Section (keep as is, ensure it has a defined height) */
.ccb-hero-section {
    background-color: #F8F0EC;
    height: 92vh; /* This height determines when the header becomes sticky */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 0;
}

/* Keep your other navigation, location, and widget styles as they are */.ccb-main-nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.ccb-nav-item-wrapper {
    position: relative;
}

.ccb-main-nav-links .ccb-nav-item {
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.ccb-main-nav-links .ccb-nav-active {
    color: #FF69B4;
}

.ccb-nav-vector {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: auto;
    display: none;
    pointer-events: none;
}

.ccb-nav-item-wrapper.active .ccb-nav-vector {
    display: block;
}
  

/* Location and Phone Widget */
.ccb-location-phone-widget {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.ccb-location-image {
    height: 50px;
    width: auto;
}

.ccb-location-arrow {
    width: 12px;
    margin-left: 5px;
}

.ccb-contact-number {
    color: #333;
    font-weight: 500;
}
/* Rest of your existing CSS (hero section, parallax elements etc.) */















































 




















/* 
 
.ccb-category-strip-section {
    background-color: #FEEAEC;  
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-top: -50px;  
    position: relative;
    z-index: 3; 
    border-radius: 10px;
    max-width: 90%;  
    margin-left: auto;
    margin-right: auto;
}

.ccb-category-item {
    font-size: 1.1rem;
    font-weight: 600;
    color: #666;
    padding: 10px 15px;
    transition: color 0.3s ease;
    cursor: pointer;
}

.ccb-category-item:hover {
    color: #FF6B6B;
}

.ccb-category-icon {
    width: 28px; 
    height: 28px;
    object-fit: contain;
} */




















.ccb-category-strip-section {
    background-color: #fcebeb;
    padding: 10px 0;
    overflow: hidden; /* This is crucial to hide the duplicated content outside the wrapper */
}

.ccb-category-scroll-wrapper {
    position: relative;
    overflow: hidden; /* This ensures the track is clipped */
    width: 100%;
    /* No explicit height here, let content define it or set a min-height */
}

.ccb-category-scroll-track {
    display: flex;
    gap: 30px;
    white-space: nowrap; /* Keeps items in a single line */
    animation: infiniteScroll 20s linear infinite;
    /* Important: We need the track to be wide enough to hold both sets of content */
    /* If you're doing pure CSS, you often set this to a very large number or use JS to calculate */
    /* A common pattern for this type of scroll is to make the track width content-driven and then use JavaScript for exact width calculation for perfect looping if pure CSS doesn't cut it. */
    /* For pure CSS with duplication, the animation typically uses -100% or -50% based on whether you duplicate once or multiple times. */
    /* Let's try to make it work with -50% and doubling content */
    width: max-content; /* This makes the track as wide as its content */
    padding-right: 30px; /* Add some padding so the last item doesn't get cut off before duplicating */
}

/* REMOVE THIS, as we are duplicating in HTML */
/* .ccb-category-scroll-track::after {
    content: attr(data-duplicate);
    display: flex;
} */


.ccb-category-item {
    flex-shrink: 0; /* Prevents items from shrinking */
    display: flex;
    align-items: center;
    padding: 8px 20px;
    color: #FF6B6B;
    font-weight: 600;
    border-radius: 25px;
    white-space: nowrap;
    transition: transform 0.5s ease;
     text-transform: uppercase;
 
}

/* Seamless infinite scroll animation */
@keyframes infiniteScroll {
    0% {
        transform: translateX(0%);
    }
    100% {
        /* This should be -50% because you've duplicated the content ONCE. */
        /* So, moving 50% of the total track width brings the second set of content to the start. */
        transform: translateX(-50%);
    }
}
  

















/* --- About Us Section --- */
.ccb-about-section {
    background-color: #ffffff;
    padding-top: 80px;
    padding-bottom: 80px;
}










/* "WHO WE ARE" Subtitle */
.ccb-about-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: #0B8259;
    letter-spacing: 2px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px; /* Adjust this to give space for your image */
}

.ccb-about-subtitle::after {
    content: '';
    display: block;
    /* Use background-image instead of background-color */
    background-image: url('/images/vector.png'); /* IMPORTANT: Adjust path if needed */
    background-size: contain; /* Ensures the image fits within the defined width/height */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center bottom; /* Centers the image and aligns to bottom */

    width: 130px; /* Adjust to the desired width of your vector.png */
    height: 15px;   

    margin: 0 auto; /* To help with centering, though transform is more precise */
    position: absolute;
    bottom: 0; /* Aligns to the bottom of the subtitle */
    left: 50%;
    transform: translateX(-50%); /* Centers the image horizontally */
}





/* Main About Heading */













/* Feature Icons Section */
.ccb-feature-card {
    display: flex; /* Use Flexbox for horizontal layout */
     
    text-align: left; /* Align text to the left within the card */
    padding: 15px; /* Adjust padding as needed */
    /* Remove fixed width and height */
    /* width: 650px; */
    /* height: 50px; */
    background-color: #fff; /* Optional: add a background to make cards distinct */
    border-radius: 10px; /* Optional: rounded corners */
         /* Optional: subtle shadow */
    margin-bottom: 20px; /* Space between cards in a column layout */
    transition: transform 0.2s ease-in-out; /* Add a little hover effect */
}

.ccb-feature-card:hover {
    transform: translateY(-3px);
}

.ccb-feature-icon {
    width: 40px; /* Make icon larger to match the image */
    height: 40px; /* Ensure height matches width for square icons */
    object-fit: contain;
    margin-right: 15px; /* Add space between icon and text */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.ccb-feature-title {
    font-size: 17px; /* Slightly adjust font size, e.g., 17px or 1em */
    font-weight: 600;
    color: #333333; /* Darker color for better contrast */
    line-height: 1.3; /* Adjust line height for multiline titles */
    margin-bottom: 0; /* Remove default bottom margin from h3 */
    flex-grow: 1; /* Allow title to take available space */
}

/* Responsive adjustments for Feature Cards */
@media (max-width: 767.98px) { /* Mobile View */
    .ccb-feature-card {
        /* On mobile, cards will stack. Max-width helps prevent them from being too wide */
        max-width: 380px; /* Limit width of individual cards on small screens */
        margin-left: auto;
        margin-right: auto; /* Center the cards on mobile */
        padding: 12px; /* Slightly less padding on mobile */
        margin-bottom: 15px; /* Slightly less margin for tighter packing */
    }
    .ccb-feature-icon {
        width: 35px;
        height: 35px;
        margin-right: 10px;
    }
    .ccb-feature-title {
        font-size: 15px; /* Smaller font size on mobile */
    }
}

/* Adjust for tablets (col-sm-6 means 2 cards per row on small devices) */
@media (min-width: 576px) and (max-width: 991.98px) {
    .ccb-feature-card {
        padding: 15px;
        margin-bottom: 20px; /* Default spacing */
    }
    /* Ensure the cards are horizontally centered within their columns if they don't fill 100% */
    .col-sm-6 > .ccb-feature-card {
        margin-left: auto;
        margin-right: auto;
    }
}

/* For desktops (col-md-3 means 4 cards per row on medium devices and up) */
@media (min-width: 992px) {
    .ccb-feature-card {
        /* Reset any mobile-specific max-width */
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}



















/* Main About Heading (Keep as is, but ensure it's not affected by feature card changes) */
.ccb-about-main-heading {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    font-family: "otomanopee-one", sans-serif;
    font-weight: 400;
    font-style: normal;
}




/* Description Paragraph */
.ccb-about-description {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    margin-bottom: 30px;
}

/* Checklist Box Container */
.ccb-checklist-box {
    background: #FAFAF3;
width: 70%;
margin: 0 auto;
    border-radius: 15px;
    padding: 60px 40px 60px 80px;
 
}

/* Individual Checklist Item Styling */
.ccb-checklist-item {
    display: flex;
    align-items: center;
    font-size: 1.05rem;
    color: #444;
    margin-bottom: 15px;
    
}

.ccb-checklist-item:last-child {
    margin-bottom: 0;
}

.ccb-checklist-item img {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

 












/* Footer Section */
.ccb-main-footer {
    background-color: #FF003C; /* Red background */
    color: white;
    position: relative; /* Essential for absolute positioning of children like retro.png */
    overflow: hidden; /* Crucial to clip anything overflowing */
    padding-top: 20px; /* Padding for content inside the footer */
    /* Adjust this padding-bottom to create desired overlap with retro.png */
    padding-bottom: 20px; /* Example: If retro.png is 100px tall, this makes it overlap by 50px */
    min-height: 250px; /* Ensure footer has enough height, adjust as needed */
}

/* Background cake image for footer (::before pseudo-element) */
.ccb-main-footer::before {
    content: '';
    position: absolute;
    bottom: 0; /* Aligns to the bottom of the footer */
    right: 0;
    width: 400px; /* Adjust cake size as needed */
    height: 400px; /* Adjust cake size as needed */
    background-image: url('images/footer-cake-delivery.png'); /* The main large cake image */
    background-size: contain; /* Ensure it fits within width/height */
    background-repeat: no-repeat;
    background-position: bottom right;
    z-index: 1; /* Place it above the default footer background, but below retro.png and content */
    opacity: 0.3;
}

/* RETRO.PNG IMAGE CONTAINER */
.ccb-retro-image-container {
    position: absolute; /* Position absolutely within .ccb-main-footer */
    bottom: 0; /* Aligns to the very bottom of the footer */
    right: 10%; /* Align to the right side of the footer */
    width: auto; /* Let the image's inherent width define the container's width */
    height: auto; /* Let the image's aspect ratio dictate height */
    display: flex; /* Use flex to control image alignment within its container */
    justify-content: flex-end; /* Align the image to the right within this container */
    z-index: 2; /* IMPORTANT: Higher than the footer-cake (z-index: 1) so it sits on top */
    pointer-events: none; /* Allows clicks to pass through if it's just a decorative image */
}

.ccb-retro-image {
    max-width: 400px; /* Make it smaller: Adjust this value as needed */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove any extra space below the image */
    margin-bottom: 0; /* Ensure no unwanted margin */
}

/* Ensure footer content (text, links, delivery box) is always on top */
.ccb-main-footer .container {
    position: relative; /* Essential for z-index to work */
    z-index: 3; /* HIGHEST Z-INDEX: Ensures all content is above both background images */
    padding-bottom: 0 !important; /* Remove any conflicting Bootstrap padding-bottom */
}

/* Free Home Delivery Box */
/* .ccb-delivery-box {
    background-color: #e00040;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 250px;
    margin-top: 20px;
    padding: 12px;
    height: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    
    position: relative;
    z-index: 3;  
} */



.ccb-delivery-box {
    
    display: flex;
 width: 800px;
    gap: 10px;
    
    position: relative;
    z-index: 3; /* Ensure it's above the retro image */
}

.ccb-delivery-icon {
    width: 45px;
    height: auto;
}

.ccb-delivery-title {
    font-size:0.95rem;
    font-weight: bold;
    margin-bottom: 2px;
}

.ccb-delivery-text {
    font-size: 0.75rem;
    color: #f0f0f0;
}

/* Footer Headings - White Color */
.ccb-footer-heading {
    font-size: 13px;
   
    margin-bottom: 15px;
    color: white; /* Subtitles are now white */


    font-family: "otomanopee-one", sans-serif;
font-weight: 400;
font-style: normal;
}

.ccb-footer-text {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 8px;
    color: #f0f0f0; /* Slightly off-white for text */
}

/* Social Media Icons (Font Awesome) - No blue color */
.ccb-social-icon-fa {
    font-size: 28px;
    color: white; /* Icons are white */
    text-decoration: none; /* Ensure no underline on links */
    transition: color 0.2s ease, transform 0.2s ease;
}

.ccb-social-icon-fa:hover {
    color: #ffd700; /* Gold or light yellow on hover */
    transform: scale(1.1);
}

/* Contact Icons (Font Awesome) - No blue color */
.ccb-contact-icon {
    font-size: 20px;
    color: white; /* Icons are white */
    margin-right: 8px;
}

/* Footer Links - No blue color, using icon bullets */
/* This style applies to the <a> tags within <p> for the "COMPANY" section */
.ccb-footer-link {
    color: #f0f0f0; /* Link text color (was blue by default) */
    text-decoration: none; /* Remove underline from links */
    font-size: 0.95rem;
    transition: color 0.2s ease;
    display: flex; /* Make it a flex container to align icon and text */
    align-items: center; /* Vertically align icon and text */
}

.ccb-footer-link:hover {
    color: #ffd700; /* Gold or light yellow on hover */
}

/* Style for the new icon bullets for links/items */
.ccb-bullet-icon {
    font-size: 0.8em; /* Adjust size relative to text */
    color: #ffd700; /* Yellow/gold color for the bullet icons */
    margin-right: 8px;
}

.ccb-footer-copyright {
    font-size: 0.85rem;
    margin-top: 20px;
    color: #ccc;
}

/* Ensure all relevant content elements are on top */
.ccb-footer-heading,
.ccb-footer-text,
.ccb-social-icon-fa,
.ccb-contact-icon,
.ccb-footer-link {
    position: relative; /* Ensure z-index works */
    z-index: 3;
}



.ccb-delivery-box img{
    width: 70%;
    position: relative;
    top: -30%;
    right: -40%;
}

/* Media query adjustments for footer */
@media (max-width: 767.98px) {
    .ccb-main-footer::before {
        width: 300px; /* Smaller cake on mobile */
        height: 300px;
        right: -50px; /* Adjust position on mobile */
        bottom: 0;
    }

    /* Adjust retro image for mobile */
    .ccb-retro-image-container {
        /* Keep bottom: 0; right: 0; */
        bottom: -20px;
        justify-content: flex-end; /* Keep it right-aligned */
        
    right: -20%; /* Align to the right side of the footer */
    }
    .ccb-retro-image {
        max-width: 360px; /* Even smaller on mobile */
    }

    /* Adjust main footer padding for mobile if necessary */
    .ccb-main-footer {
        padding-bottom: 40px; /* Adjust this value based on desired overlap on mobile */
    }

    /* Stack elements for better mobile readability */
    .ccb-main-footer .col-lg-3.col-md-6.d-flex.justify-content-end {
        justify-content: flex-start !important; /* Align delivery box to left on mobile */
        margin-top: 20px; /* Add some space above it */
    }


 





    .ccb-delivery-box img{
        width: 40%;
        position: relative;     
        left: 0%;

    }



    .ccb-checklist-box {
  
width: 90%;
margin: 0 auto;
    border-radius: 15px;
    padding: 20px 20px 20px 20px;
 
}

    

 
}






 









 








 
@media (max-width: 768px) {
    /* Categories Strip Responsive */
    
    .ccb-category-item {
        font-size: 0.9rem;
        padding: 8px 10px;
    }
    .ccb-category-icon {
        width: 24px;
        height: 24px;
    }

    
}










































 
.ccb-product-showcase-section {
    /* padding-bottom: 80px; */
    position: relative;
 
}

 
.ccb-product-showcase-section .container-fluid {
    padding-left: 15px; 
    padding-right: 15px; 
}

 
 

.carousel-inner.ccb-carousel-track {
    /* display: flex;  */
    flex-wrap: nowrap;  
 
}

 
.carousel-item {
    
 
    flex-shrink: 0;  
}

.carousel-item .row {
    margin-left: -10px; 
    margin-right: -10px;  
}

 
.ccb-product-card-wrap {
     
    margin-bottom: 20px; /* Space below each card row within a slide */
}

/* Product Card Styling */
.ccb-product-card {
 

    border-radius: 15px;
   
 
    text-align: center; /* Keep for general alignment, individual elements will override */
    transition: transform 0.3s ease-in-out;
    height: 100%; /* Ensure cards in a row have equal height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute space */
    position: relative; /* Needed for positioning the plus icon */
    overflow: hidden; /* Hide anything overflowing */
    margin: 0; /* IMPORTANT: Remove margins from the card itself */
}

 
.ccb-product-img {
  
    /* No 'mask-image' or 'mask-size' applied here. */
    /* For PNGs, ensure background is transparent or remove any masking CSS from other rules */
    /* If you have a global `mask-image` on `img` tag, you'll need to remove it or override it here. */
 
    object-fit: contain; /* CRITICAL: 'contain' will shrink larger images to fit without cropping */
    background-color: transparent; /* Ensure no background interferes with PNG transparency */
    border-radius: 10px;
    margin-bottom: 15px;
    display: block; /* Remove any inline-block spacing issues */
    margin-left: auto; /* Center image if it doesn't fill max-width */
    margin-right: auto;
}

.ccb-product-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000; /* Matches the color in your image */
    margin-bottom: 5px; /* Adjust spacing */
    text-align: left; /* ALIGN LEFT */
    flex-grow: 0; /* Do not grow */
    align-self: flex-start; /* Align to the start (left) */
}

.ccb-product-description {
    font-size: 0.95rem;
    color: #555;
    flex-grow: 1; /* Allows description to take available space */
    text-align: left; /* ALIGN LEFT */
}

.ccb-product-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #28a745; /* Example price color, green */
    margin-top: 10px;
    text-align: left; /* ALIGN LEFT */
    align-self: flex-start; /* Align to the start (left) */
}

 

.ccb-product-card:hover .ccb-plus-icon-wrapper {
    opacity: 1; /* Show on hover */
}

.ccb-plus-btn {
    background: none;
    border: 2px solid white;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); */
}

 

/* Custom Carousel Navigation and Play/Pause Controls */
.ccb-carousel-controls-wrapper {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between buttons */
    z-index: 20; /* Ensure controls are above carousel content */
    margin-top: 30px; /* Space below the carousel */

    /* Desktop: bottom-right */
    justify-content: flex-end; /* Push to right */
    padding-right: 30px; /* Adjust padding if necessary */

    /* FIX: Position relative to the section, not absolute relative to carousel */
    /* This will prevent overlap on footer by being part of the document flow */
    position: relative; /* Changed from absolute */
    bottom: unset; /* Remove previous bottom positioning */
    width: 100%;
    left: 0;
    padding-bottom: 20px; /* Add some padding below controls */
}

.ccb-carousel-control {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 0, 79, 0.7); /* Red with transparency */
    border-radius: 50%;
    opacity: 1; /* Always visible */
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */
    border: none; /* Remove default button border */
    color: white; /* For Font Awesome icons */
    font-size: 1.5rem; /* For Font Awesome icons */
}

.ccb-carousel-control:hover {
    background-color: #ff0000;
}

/* Ensure Bootstrap's default carousel icons are correctly styled (for prev/next) */
.ccb-carousel-control .carousel-control-prev-icon,
.ccb-carousel-control .carousel-control-next-icon {
    width: 20px;
    height: 20px;
    background-size: 100% 100%;
    filter: brightness(0) invert(1); /* Make default Bootstrap icons white */
}

/* Specific styling for play/pause icon */
.ccb-carousel-control.ccb-play-pause i {
    font-size: 1.2rem; /* Slightly smaller icon */
}


/* Modal/Overlay Styling */
.ccb-product-modal .modal-dialog {
    max-width: 500px; /* Adjust modal width */
}

.ccb-modal-content {
    border-radius: 15px;
    overflow: hidden; /* Ensures rounded corners on image inside */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border: none;
    background-color: white;
}

.ccb-modal-header {
    background-color: #ff0000; /* Pink/Red header */
    color: white;
    border-bottom: none;
    padding: 15px 20px;
    position: relative; /* For close button positioning */
}

.ccb-modal-title {
    font-family: "otomanopee-one", sans-serif; /* Your heading font */
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
    margin-bottom: 0;
}

.ccb-modal-close-btn {
    filter: brightness(0) invert(1); /* Make close icon white */
    opacity: 1; /* Ensure visible */
    position: absolute;
    right: 15px;
    top: 15px;
}

.ccb-modal-body {
    padding: 20px;
    text-align: center;
}

.ccb-modal-img {
    max-width: 100%;
    height: 250px; /* Larger image in modal */
    object-fit: contain; /* CRITICAL: 'contain' here too for modal images */
    background-color: transparent; /* Ensure no background interferes */
    border-radius: 10px;
    margin-bottom: 15px;
    display: block; /* Remove any inline-block spacing issues */
    margin-left: auto;
    margin-right: auto;
}

.ccb-modal-description {
    font-size: 1rem;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.6;
}

.ccb-modal-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ff004f; /* Price color matches theme */
}

/* Background Blur Effect */
body.modal-active > *:not(.modal):not(script) {
    filter: blur(5px);
    transition: filter 0.3s ease-out;
}
body.modal-active {
    overflow: hidden; /* Prevent scrolling when modal is open */
}

/* --- Header sticky fix for mobile shake --- */
.ccb-header-wrapper.sticky-header {
    /* This promotes GPU acceleration for smoother scrolling */
    will-change: transform;
    transform: translateZ(0); /* Also a common trick for GPU acceleration */
}


/* Responsive adjustments for carousel */
@media (max-width: 767.98px) {
    /* Mobile styles - show one card at a time */
    .col-12.ccb-product-card-wrap { /* Target specifically to override generic col-12 */
        width: 100%;
        max-width: 350px; /* Max width for single card on mobile */
        margin-left: auto;
        margin-right: auto;
    }
    .ccb-product-card-wrap {
        /* Ensure padding is consistent for card separation */
        padding: 0 10px;
    }


    .ccb-product-img {
        height: 180px; /* Slightly smaller images on mobile */
    }

    .ccb-product-title {
        font-size: 1.3rem;
    }

    .ccb-carousel-control {
        width: 40px; /* Smaller buttons on mobile */
        height: 40px;
        font-size: 1.2rem;
    }

    /* Mobile: center-bottom for carousel controls */
    .ccb-carousel-controls-wrapper {
        justify-content: center; /* Center horizontally */
        padding-right: 0;
        /* bottom: -50px; -- REMOVED because position is now relative */
    }

    /* Adjust modal for mobile */
    .ccb-product-modal .modal-dialog {
        margin: 0.5rem;
    }
}

/* For tablets and larger mobiles (e.g., 2 cards per row) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .col-md-6.ccb-product-card-wrap { /* Target specifically to override generic col-md-6 */
        width: 50%; /* Make sure it's exactly 2 per row */
    }
    /* Controls should still be centered on tablets unless specified otherwise */
    .ccb-carousel-controls-wrapper {
        justify-content: center;
        padding-right: 0;
    }
}

/* For desktop (3 cards per row) */
@media (min-width: 992px) {
    .col-lg-4.ccb-product-card-wrap { /* Target specifically to override generic col-lg-4 */
        width: 33.333333%; /* Make sure it's exactly 3 per row */
    }
    .ccb-carousel-controls-wrapper {
        justify-content: flex-end; /* Push to right on desktop */
        padding-right: 30px; /* Match desktop padding */
    }
}







/* Custom CSS for multiple items per slide on desktop */
@media (min-width: 992px) {
    #productCarousel .carousel-inner.display-multiple {
        display: flex;
    }

    #productCarousel .carousel-inner.display-multiple .carousel-item {
        margin-right: 0;
        flex: 0 0 33.333333%; /* Show 3 items */
        display: block;
        transition: transform 0.5s ease-in-out;
    }
}













 












@media (max-width: 767.98px) {
    .carousel-item .row {
        flex-wrap: nowrap;   /* keep one row */
        justify-content: center;
    }
    .carousel-item .ccb-product-card-wrap {
        flex: 0 0 100%;      /* Take full width */
        max-width: 100%;
    }
}
@media (min-width: 992px) {
    .carousel-item .ccb-product-card-wrap {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}






























 
























































/* From Uiverse.io by AlimurtuzaCodes */ 
.btn {
    border: none;
    width: 15em;
    height: 4em;
    border-radius: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
     background: linear-gradient(0deg,#158E52,#5FC9A6);
    cursor: pointer;
    transition: all 450ms ease-in-out;
  }


  .btnlink{
    text-decoration: none;
  }
  .btn img{
    color: white;
     

  }
  
  .sparkle {
    fill: #ffffff;
    transition: all 800ms ease;
  }
  
  .text {
    font-weight: 600;
    color: #ffffff;
    font-size: medium;
  }
  
  .btn:hover {
   background: linear-gradient(0deg,#0b6638,#36cd9b);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4),
    inset 0px -4px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 4px rgba(255, 255, 255, 0.2),
    0px 0px 180px 0px #17ff3a;
    transform: translateY(-2px);
  }
  
  .btn:hover .text {
    color: white;
  }
  
  .btn:hover .sparkle {
    fill: white;
    transform: scale(1.2);
  } 


  .btn .sparkle { /* Or target the img directly if .sparkle is on img */
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
    /* This filter value converts black to white. You might need to adjust for other starting colors. */
}



.navbar-brand img{
    width: 70px;
}


.ccb-nav-vector {
    position: absolute;
    bottom: 10px; /* Changed from '10' to '10px' for clarity, though '10' might work */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: auto;
    display: none; /* Hidden by default */
}

.ccb-nav-item-wrapper .ccb-nav-active + .ccb-nav-vector {
    display: block; /* Show vector when link is active */
}










/* Ensure you have a CSS file linked in your HTML <head> like this: */
/* <link rel="stylesheet" href="path/to/your/style.css"> */

.ccb-nav-item {
    position: relative; /* Needed for positioning the pseudo-element */
    padding-bottom: 10px; /* Adjust this to give space for the underline */
    text-decoration: none; /* Remove default underline if any */
    /* Add any other styling for your nav items (e.g., color, font-size) */
}

.ccb-nav-item.ccb-nav-active {
    /* Style for the active text, e.g., different color */
    color: #e03a83; /* Example color, adjust to match your 'Home' link color */
}

.ccb-nav-item.ccb-nav-active::after {
    content: ''; /* Essential for pseudo-elements */
    position: absolute;
    left: 50%; /* Start from the center */
    bottom: 0; /* Position at the bottom of the link */
    transform: translateX(-50%); /* Center the underline horizontally */
    width: 100%; /* Adjust to control the width of the underline relative to the text */
    height: 35px; /* Adjust based on the height of your vector.png */
    background-image: url('../images/vector.png'); /* IMPORTANT: Adjust path to your image */
    background-size: contain; /* Or '100% 100%' if you want it to stretch */
    background-repeat: no-repeat;
    background-position: center bottom; /* Center the image within its allocated space */
    
    /* Optional: Add a transition for a smooth effect */
    opacity: 1; /* Make it visible */
    transition: width 0.3s ease, opacity 0.3s ease; /* Example transition */
}

/* Optional: If you want to initially hide it and make it appear */
.ccb-nav-item::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0; /* Start with no width */
    height: 5px; /* Same height as active state */
    background-image: url('../images/vector.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
    opacity: 0; /* Initially hidden */
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* When active, expand the width and make it visible */
.ccb-nav-item.ccb-nav-active::after {
    width: 100%; /* Full width when active */
    opacity: 1; /* Fully visible */
}

/*
Alternative for a fixed width underline if your vector.png is designed for a specific size:

.ccb-nav-item.ccb-nav-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;  // Example fixed width, adjust as needed
    height: 5px; // Adjust based on your vector.png
    background-image: url('../images/vector.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}
*/



 















 
















/* General transitions for smooth interactive elements */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a, button {
    transition: all 0.3s ease-in-out; /* Smooth hover and active states */
}

/* Header Transitions */
.ccb-header-wrapper {
    transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.ccb-header-wrapper.sticky-header {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 10px 0;
}

.ccb-main-nav-links .ccb-nav-item {
    position: relative;
    color: #333;
    transition: color 0.3s ease-in-out;
    padding: 5px 0;
}

   

/* Button Hover Effect (Keep for interactivity) */
.btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
 

/* Category Strip (Continuous scroll animation via CSS) */
.ccb-category-scroll-track {
    white-space: nowrap;
    animation: scrollCategories 30s linear infinite; /* Only this animation remains */
}

.ccb-category-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 25px;
    /* background-color: #fce4ec; */
    margin: 0 10px;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Hover transition */
}

 

/* Feature Card (Hover transition) */
.ccb-feature-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

 
/* Product Card (Hover transition) */
/* .ccb-product-card:hover .ccb-product-img {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
} */

/* .ccb-product-img {
    transition: transform 0.3s ease-in-out;
} */

/* Social Media Icons (Hover transition) */
.ccb-social-icon-fa {
    font-size: 24px;
    color: #fff;
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.ccb-social-icon-fa:hover {
    color: #ffb6c1;
    transform: translateY(-5px);
}

/* Keyframe for Category Scroll - THIS IS THE ONLY KEYFRAME YOU NEED */
@keyframes scrollCategories {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}




 .go-back-btn {
    position: relative;
    width: 17rem;
    height: 3.5rem;
    border-radius: 1rem;
    font-size: 1.25rem;
    font-weight: 600;
    overflow: hidden;
    border: none;
    padding: 0;
    background: transparent;
     color: white;
  }

  .go-back-btn .base-bg {
    position: absolute;
    top: 0;
    color: white;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #158E52; /* white base background */
    border-radius: 1rem;
    z-index: 0;
  }

  .go-back-btn .expanding-bg {
    position: absolute;
    top: 4px;
    left: 4px;
    height: calc(100% - 8px);
    color: white;
    width: 3rem;
    background-color: #4ade80; /* green-400 */
    border-radius: 0.75rem;
    transition: all 0.5s ease-in-out;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .go-back-btn:hover .expanding-bg {
    width: calc(100% - 8px);
  }

  .go-back-btn .label {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* behind green */
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(8px);
    color: rgb(255, 255, 255);
  }

  .go-back-btn svg {
    z-index: 3; /* icon stays on top */
  }








 /* Default: show mobile carousel, hide desktop carousel */
#menu.mobile-carousel {
  display: block;
}

#menu.desktop-carousel {
  display: none;
}

/* Desktop view (≥992px) */
@media (min-width: 992px) {
  #menu.mobile-carousel {
    display: none; /* hide mobile carousel */
  }

  #menu.desktop-carousel {
    display: block; /* show desktop carousel */
  }
}












/* Mobile carousel stays the same */
.mobile-carousel {
  display: block;
}

/* Desktop carousel visibility */
.desktop-carousel {
  display: none;
}

/* Media queries */
@media (min-width: 992px) {
  .mobile-carousel {
    display: none;
  }
  .desktop-carousel {
    display: block;
  }

  /* Add space below carousel to clear footer */
  .desktop-carousel .container-fluid {
    /* padding-bottom: 100px;   */
 
  }

  /* Keep carousel controls above images, not floating */
  .desktop-carousel .ccb-carousel-controls-wrapper {
 
    bottom: 10px; /* distance from bottom of carousel container */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
    z-index: 10;
  }
}