/* Brand headings - same thick, rounded "Baloo 2" look used on the home hero
   title ("YOUR PERFECT MEAL"), applied to every section heading site-wide
   for a consistently bold feel. Sub-titles (eg. "FRESH PICKS") keep their
   own Comfortaa style. */
h1, h2, h3,
.breadcrumb_title,
.hero-title-lift,
.section-title-04__title,
.section-title-10__title,
.about-cta__title,
.about-hero-card__title,
.event_title,
.newsletter__title,
.contact-section2__title,
.contact-section2_form__title,
.instagram-two-title {
    font-family: "Baloo 2", "Comfortaa", sans-serif;
    font-weight: 800;
}

/* Swap the section title colors site-wide: the small eyebrow sub-title
   (eg. "FRESH PICKS") now takes the dark brown the main heading used to
   have, and the main heading takes the orange the sub-title used to have. */
.section-title-04__sub-title,
.section-title-10__subtitle {
    color: #212121;
    font-family: "Baloo 2", "Comfortaa", sans-serif;
    font-weight: 700;
}
.section-title-04__title,
.section-title-10__title {
    color: #F87C02;
}

.footer-widget__logo {
    margin: 0px !important;
}

/* Both logo variants (dark/white, swapped via .dark-footer) share one small, consistent
   size - the theme default left the white variant unconstrained, so it rendered oversized */
.footer-widget__logo img {
    width: 70px !important;
    height: auto;
}

/* The theme's dark-footer logo swap points .logo-white at the same multi-colour
   logo.png as .logo-dark, so nothing actually turned white - render it as a solid
   white silhouette via filter instead of needing a separate white logo asset. */
.footer-widget__logo .logo-white img {
    filter: brightness(0) invert(1);
}

/* Sticky header - theme default was a low-contrast salmon (#FFF600); use the brand's
   own accent color instead so the scrolled header still feels on-theme */
.header-sticky-03.sticky {
    background-color: rgba(248, 124, 2, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(33, 33, 33, 0.12);
}

/* The logo, nav links and search/menu icons used to each sit in their own separate
   white pill with gaps of bare hero background between them. Put a single white bar
   behind the whole row instead so the header reads as one navbar, not three pieces. */
.header-navbar {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50px;
    box-shadow: 0 6px 16px rgba(33, 33, 33, 0.12);
    padding: 8px 20px;
    margin: 0;
}
@media only screen and (max-width: 767px) {
    .header-navbar {
        padding: 6px 14px;
    }
}

.header-logo {
    display: inline-flex;
    align-items: center;
}

.header-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    padding-left: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-meta {
        padding-left: 10px;
    }
}

.header-primary-menu-04 {
    max-width: 100%;
    box-shadow: none !important;
    background-color: transparent !important;
}
/* Theme default hover was a low-contrast yellow (#FFF600); use the brand's
   own orange accent instead so the nav hover matches the site's palette. */
.header-primary-menu-04 li:hover > .menu-item-link,
.header-primary-menu-04 li > .menu-item-link.active {
    color: #F87C02 !important;
}
.header-primary-menu-04 li:hover > .menu-item-link > span::before,
.header-primary-menu-04 li > .menu-item-link.active > span::before {
    background-color: #F87C02 !important;
}
.header-primary-menu-04 .sub-menu li .sub-item-link span::before,
.header-primary-menu-04 .sub-menu li:hover > .sub-item-link {
    color: #F87C02 !important;
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .header-primary-menu-04 li {
        padding: 15px 16px 15px 22px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header-primary-menu-04 li {
        padding: 15px 10px 15px 14px;
    }
}

.header-meta__action-03 li .action,
.header-sticky-03:not(.sticky) .header-meta__action-03 li .action,
.header-sticky-03.sticky .header-meta__action-03 li .action {
    color: #555555;
}
.header-meta__action-03 li:hover .action,
.header-sticky-03:not(.sticky) .header-meta__action-03 li:hover .action,
.header-sticky-03.sticky .header-meta__action-03 li:hover .action {
    color: #F87C02;
}

/* Mobile menu sidebar - theme default was a flat Bootstrap grey (bg-secondary) with
   low-contrast grey hotline labels; switch to the brand's own dark brown and lift the
   hotline text/icon colors so they're actually legible against it. */
.offcanvas-menu.bg-secondary {
    background-color: #2F1E12 !important;
}
.offcanvas-menu .btn-close {
    color: #fff;
    opacity: 1;
}
.offcanvas-menu .mobile-primary-menu li > .menu-item-link:hover,
.offcanvas-menu .mobile-primary-menu li > .menu-item-link.active {
    color: #FFC887;
}
.offcanvas-hotline .hotline i {
    color: #FFC887;
}
.offcanvas-hotline .hotline-text {
    color: #d9b89c;
}
.offcanvas-hotline .hotline-link {
    color: #fff !important;
}
.offcanvas-hotline .hotline-link:hover {
    color: #FFC887 !important;
}

/* Site-wide button look, matching the "Explore Our Products" CTA on the About Us hero -
   every .btn on the front-end (regardless of its bootstrap variant - primary, secondary,
   dark, outline-*, brand) gets the same solid orange pill by default, and the same
   lift + orange-tinted glow on hover. Excludes .btn-close, which is a bootstrap UI
   control, not a CTA. */
.btn:not(.btn-close) {
    background-color: #F87C02;
    border-color: #F87C02;
    color: #fff;
    border-radius: 50px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:not(.btn-close):hover,
.btn:not(.btn-close):focus,
.btn:not(.btn-close):active {
    background-color: #F87C02;
    border-color: #F87C02;
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(248, 124, 2, 0.35);
}

/* Career & Distributor application form cards - same lift/shadow treatment as the
   rest of the site's cards. */
.card.border-0.shadow {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.border-0.shadow:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(248, 124, 2, 0.16) !important;
}

.alert-success,
.alert-danger {
    display: inline-block;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
}

.alert-success {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}

.alert-danger {
    background: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
}

.whatsapp-float {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 999;
    width: 56px;
    height: 56px;
    background-color: #F87C02;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.whatsapp-float:hover {
    background-color: #F87C02;
    color: #fff;
    transform: scale(1.08);
}

/* Operations - Our Process Timeline */
.op-timeline-section {
    background-color: #fdfbf8;
}

.op-zig-timeline {
    position: relative;
    max-width: 1140px;
    margin: 60px auto 0;
    padding: 0 15px;
}

.op-zig-timeline__track,
.op-zig-timeline__progress {
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    transform: translateX(-50%);
}

.op-zig-timeline__track {
    height: 100%;
    background-color: #e2d9d0;
    z-index: 1;
}

.op-zig-timeline__progress {
    height: 0;
    background-color: #F87C02;
    z-index: 1;
    transition: height 0.1s linear;
}

.op-zig-item {
    position: relative;
    padding-bottom: 80px;
}

.op-zig-item:last-child {
    padding-bottom: 0;
}

.op-zig-item__node {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fdfbf8;
    border: 2px solid #e2d9d0;
    color: #212121;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    z-index: 2;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.op-zig-item__node.is-active {
    background-color: #F87C02;
    border-color: #F87C02;
    color: #fff;
    transform: translateX(-50%) scale(1.1);
}

.op-zig-item__image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(33, 33, 33, 0.12);
    transition: box-shadow 0.35s ease;
}

.op-zig-item__image:hover {
    box-shadow: 0 20px 40px rgba(248, 124, 2, 0.2);
}

.op-zig-item__image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.op-zig-item__image:hover img {
    transform: scale(1.08);
}

.op-zig-item__content {
    padding: 0 10px;
}

.op-timeline__title {
    font-family: "Jua", sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-transform: none;
    color: #212121;
    margin-bottom: 15px;
}

.op-timeline__text {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #6b6b6b;
    margin-bottom: 15px;
}

.op-timeline__link {
    display: inline-block;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #F87C02;
    text-decoration: underline;
}

.op-timeline__link:hover {
    color: #212121;
}

.op-timeline__modal .modal-content {
    border-radius: 10px;
    border: none;
}

.op-timeline__modal .modal-header {
    border-bottom: 1px solid #eee;
}

.op-timeline__modal .modal-title {
    font-family: "Jua", sans-serif;
    font-size: 22px;
    color: #212121;
}

.op-timeline__modal-text {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #6b6b6b;
    margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
    .op-zig-timeline {
        padding-left: 45px;
    }

    .op-zig-timeline__track,
    .op-zig-timeline__progress {
        left: 20px;
        transform: none;
    }

    .op-zig-item {
        padding-top: 0;
        padding-bottom: 50px;
        padding-left: 5px;
    }

    .op-zig-item__node {
        top: 0;
        left: -40px;
        transform: none;
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .op-zig-item__node.is-active {
        transform: scale(1.1);
    }

    .op-zig-item__image img {
        height: 240px;
    }

    .op-zig-item__content {
        padding: 20px 0 0;
        text-align: left !important;
    }
}

/* Team social icons - non-clickable state when admin hasn't set a link */
.team-3-social__disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4c4c4;
    cursor: not-allowed;
    border-radius: 100%;
    font-size: 16px;
}

/* Home "Our Team" section - trim the large theme-default bottom padding so it doesn't leave a big gap before Our Partners */
.team.section-padding-03 {
    padding-bottom: 40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .team.section-padding-03 {
        padding-bottom: 35px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .team.section-padding-03 {
        padding-bottom: 30px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .team.section-padding-03 {
        padding-bottom: 25px;
    }
}

@media only screen and (max-width: 767px) {
    .team.section-padding-03 {
        padding-bottom: 20px;
    }
}

/* Our Partners section (last section before footer) - trim the large theme-default bottom padding.
   Top padding is intentionally left at the section-padding-03 default so its heading sits the
   same distance from the top as every other section (Best Service, Achievement, Reviews, Team). */
.brand-section-two.section-padding-03 {
    padding-bottom: 80px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .brand-section-two.section-padding-03 {
        padding-bottom: 60px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .brand-section-two.section-padding-03 {
        padding-bottom: 55px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .brand-section-two.section-padding-03 {
        padding-bottom: 45px;
    }
}

@media only screen and (max-width: 767px) {
    .brand-section-two.section-padding-03 {
        padding-bottom: 35px;
    }
}

/* Footer - dark premium treatment (theme's own .dark-footer variant, already used
   across its demo pages) instead of the plain white default, for a richer bakery feel */
.newsletter-section {
    position: relative;
}

.newsletter-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #F87C02, transparent);
}

.dark-footer .footer-widget__desc {
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    line-height: 1.7;
    max-width: 320px;
}

.footer-widget__social {
    margin-top: 22px;
}

@media (max-width: 767px) {
    .footer-widget__social {
        margin-bottom: 24px;
    }
}

.footer-widget__social a {
    display: inline-flex;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-widget__social a:hover {
    transform: translateY(-3px);
}

.footer-widget__link--icon li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.footer-widget__link--icon li + li {
    padding-top: 16px;
}

.footer-widget__link-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(248, 124, 2, 0.15);
    color: #F87C02;
    font-size: 14px;
}

/* Address text can run longer than the phone/email lines above it - let it
   wrap inside the card instead of overflowing past the footer column width. */
.footer-widget__link--icon li a,
.footer-widget__link-text {
    min-width: 0;
    overflow-wrap: break-word;
    padding-top: 6px;
}

/* Flex items default to min-width:auto, sized to their longest unbreakable
   line of content. A long one-line address was forcing this column wider
   than the row had room for, so the whole "Get In Touch" column dropped
   to its own line instead of sitting beside Quick Links/Information. */
.footer-widget-wrapper.d-flex > .footer-widget.flex-grow-1 {
    min-width: 0;
    flex-basis: 0;
}

.dark-footer .footer-widget__link-icon {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Theme default footer text was a muted grey (#858585) that read as barely visible
   against the dark background (worst on plain, non-link text like the address) - use
   white for body copy and reserve the brand accent color for the hover state */
.dark-footer .footer-widget__link li a,
.dark-footer .footer-widget__link-text {
    color: #ffffff;
}

.dark-footer .footer-widget__link li a:hover {
    color: #F87C02;
}

/* Visible divider between the widget columns and the copyright bar - the theme default
   had both areas share the same background color with no separation at all */
.dark-footer .footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dark-footer .footer-copyright-text {
    color: #ffffff;
}

/* Section headings (Our Team, Our Partners, Best Service, etc.) - trim the large gap between the heading and the content below it, site-wide */
.section-title-04 {
    padding-bottom: 50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-title-04 {
        padding-bottom: 35px;
    }
}

@media only screen and (max-width: 767px) {
    .section-title-04 {
        padding-bottom: 25px;
    }
}

/* Event ("Our Achievement") heading - even less gap before the image/content row below it */
.event .section-title-04 {
    padding-bottom: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .event .section-title-04 {
        padding-bottom: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .event .section-title-04 {
        padding-bottom: 8px;
    }
}

/* Career & Distributor application forms - the card's p-5 padding and the
   submit button's fixed px-5 width eat too much of the viewport on mobile. */
@media only screen and (max-width: 575px) {
    .form-submit-btn {
        width: 100%;
    }
}

/* Footer newsletter - round the field into a soft pill, and give the submit
   button a filled background: black by default, brand orange on hover. */
.newsletter__field {
    border-radius: 50px;
}
.newsletter__btn {
    top: 6px;
    right: 6px;
    height: 46px;
    background-color: #212121;
    color: #fff;
    border-radius: 50px;
    padding: 0 26px;
}
@media only screen and (min-width: 1600px) {
    .newsletter__btn {
        height: 56px;
    }
}
@media only screen and (max-width: 767px) {
    .newsletter__btn {
        padding: 0 18px;
    }
}
/* Below ~480px the "Subscribe" button no longer fits in the space reserved
   inside the pill and starts covering the placeholder text - stack it under
   the field instead of floating inside it. */
@media only screen and (max-width: 479px) {
    .newsletter__field {
        padding-right: 30px;
    }
    .newsletter__btn {
        position: static;
        display: block;
        width: 100%;
        margin-top: 12px;
        border-radius: 50px;
    }
}
.newsletter__btn:hover {
    background-color: #F87C02;
    color: #fff;
}

/* Scroll-to-top button - richer gradient, glow, and a gentle float so it
   feels alive instead of a flat static circle. */
.scroll-top {
    background: linear-gradient(135deg, #ffa53f, #F87C02 55%, #e56d00);
    box-shadow: 0 6px 18px rgba(248, 124, 2, 0.45), 0 2px 6px rgba(0, 0, 0, 0.15);
}
.scroll-top.show {
    animation: scrollTopFloat 2.6s ease-in-out infinite;
}
.scroll-top:hover {
    background: linear-gradient(135deg, #212121, #3a3a3a);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    transform: translateY(-4px) scale(1.1);
    animation: none;
}
.scroll-top i {
    transition: transform 0.3s ease;
}
.scroll-top:hover i {
    transform: translate(-50%, -50%) translateY(-2px);
}
@keyframes scrollTopFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-top,
    .scroll-top.show {
        animation: none;
    }
}