/* =====================================================
           GLOBAL
           ===================================================== */

        :root {

            --mc-brown: #3d1109;
            --mc-brown-dark: #260a05;

            --mc-orange: #ff914d;
            --mc-orange-light: #ffb37d;

            --mc-cream: #fff8f1;
            --mc-white: #ffffff;

            --mc-text: #321b15;
            --mc-muted: #765f58;

            --mc-border: #eadbd2;

            --mc-green: #47734b;

            --shadow-soft:
                0 18px 50px rgba(61,17,9,.10);

            --shadow-card:
                0 15px 40px rgba(61,17,9,.12);
        }


        * {
            box-sizing: border-box;
        }


        html {
            scroll-behavior: smooth;
        }


        body {

            margin: 0;

            font-family:
                "DM Sans",
                Arial,
                sans-serif;

            color:
                var(--mc-text);

            background:
                var(--mc-white);

            line-height:
                1.6;
        }


        img {

            max-width: 100%;

            display: block;
        }


        a {

            text-decoration: none;

            color: inherit;
        }


        .cc-container {

            width:
                min(1180px, calc(100% - 40px));

            margin:
                0 auto;
        }


        /* =====================================================
           BUTTONS
           ===================================================== */

        .cc-btn {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            gap:
                9px;

            min-height:
                52px;

            padding:
                0 24px;

            border-radius:
                8px;

            font-size:
                13px;

            font-weight:
                800;

            transition:
                .25s ease;

            cursor:
                pointer;
        }


        .cc-btn-primary {

            background:
                var(--mc-orange);

            color:
                var(--mc-brown);

            box-shadow:
                0 10px 25px rgba(255,145,77,.25);
        }


        .cc-btn-primary:hover {

            transform:
                translateY(-2px);

            background:
                #ffa66a;
        }


        .cc-btn-dark {

            background:
                var(--mc-brown);

            color:
                #fff;
        }


        .cc-btn-dark:hover {

            background:
                var(--mc-brown-dark);

            transform:
                translateY(-2px);
        }


        .cc-btn-outline {

            border:
                1px solid rgba(61,17,9,.22);

            color:
                var(--mc-brown);

            background:
                transparent;
        }


        .cc-btn-outline:hover {

            background:
                var(--mc-cream);
        }


        /* =====================================================
           HERO
           ===================================================== */

        .cc-hero {

            position:
                relative;

            min-height:
                700px;

            display:
                flex;

            align-items:
                center;

            overflow:
                hidden;

            background:
                var(--mc-brown);
        }


        .cc-hero-bg {

            position:
                absolute;

            inset:
                0;

            background-image:
                url("assets/images/culinary-classes-hero.jpg");

            background-size:
                cover;

            background-position:
                center;

            transform:
                scale(1.02);
        }


        .cc-hero-overlay {

            position:
                absolute;

            inset:
                0;

            background:
                linear-gradient(
                    90deg,
                    rgba(38,10,5,.94) 0%,
                    rgba(61,17,9,.83) 32%,
                    rgba(61,17,9,.45) 62%,
                    rgba(61,17,9,.10) 100%
                );
        }


        .cc-hero-content {

            position:
                relative;

            z-index:
                2;

            max-width:
                690px;

            padding:
                100px 0 110px;

            color:
                #fff;
        }


        .cc-kicker {

            display:
                inline-flex;

            align-items:
                center;

            gap:
                9px;

            margin-bottom:
                20px;

            padding:
                7px 13px 7px 8px;

            border:
                1px solid rgba(255,145,77,.45);

            border-radius:
                50px;

            background:
                rgba(61,17,9,.5);

            color:
                var(--mc-orange-light);

            font-size:
                11px;

            font-weight:
                800;

            letter-spacing:
                1.1px;

            text-transform:
                uppercase;

            backdrop-filter:
                blur(8px);
        }


        .cc-kicker-icon {

            width:
                29px;

            height:
                29px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            background:
                var(--mc-orange);

            color:
                var(--mc-brown);

            font-size:
                11px;
        }


        .cc-hero h1 {

            margin:
                0 0 23px;

            font-family:
                "Playfair Display",
                Georgia,
                serif;

            font-size:
                clamp(46px, 6vw, 76px);

            line-height:
                1.02;

            letter-spacing:
                -2px;
        }


        .cc-hero h1 span {

            color:
                var(--mc-orange);

            display:
                block;
        }


        .cc-hero-description {

            max-width:
                610px;

            margin:
                0 0 31px;

            color:
                rgba(255,255,255,.83);

            font-size:
                17px;

            line-height:
                1.75;
        }


        .cc-hero-actions {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                12px;

            margin-bottom:
                32px;
        }


        .cc-hero-note {

            display:
                flex;

            align-items:
                center;

            gap:
                9px;

            color:
                rgba(255,255,255,.67);

            font-size:
                11px;
        }


        .cc-hero-note i {

            color:
                var(--mc-orange);
        }


        /* =====================================================
           QUICK VALUE BAR
           ===================================================== */

        .cc-value-bar {

            position:
                relative;

            z-index:
                5;

            margin-top:
                -1px;

            background:
                var(--mc-brown);
        }


        .cc-value-grid {

            display:
                grid;

            grid-template-columns:
                repeat(4, 1fr);

            min-height:
                105px;
        }


        .cc-value-item {

            display:
                flex;

            align-items:
                center;

            gap:
                13px;

            padding:
                20px;

            border-right:
                1px solid rgba(255,255,255,.13);

            color:
                #fff;
        }


        .cc-value-item:last-child {

            border:
                0;
        }


        .cc-value-icon {

            flex:
                0 0 43px;

            width:
                43px;

            height:
                43px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                12px;

            background:
                rgba(255,145,77,.13);

            color:
                var(--mc-orange);

            font-size:
                15px;
        }


        .cc-value-item strong {

            display:
                block;

            font-size:
                12px;
        }


        .cc-value-item span {

            display:
                block;

            color:
                rgba(255,255,255,.5);

            font-size:
                10px;
        }


        /* =====================================================
           INTRODUCTION
           ===================================================== */

        .cc-intro {

            padding:
                105px 0;
        }


        .cc-intro-grid {

            display:
                grid;

            grid-template-columns:
                .95fr 1.05fr;

            gap:
                80px;

            align-items:
                center;
        }


        .cc-image-stack {

            position:
                relative;

            min-height:
                520px;
        }


        .cc-main-image {

            position:
                absolute;

            left:
                0;

            top:
                0;

            width:
                82%;

            height:
                430px;

            object-fit:
                cover;

            border-radius:
                18px;

            box-shadow:
                var(--shadow-soft);
        }


        .cc-small-image {

            position:
                absolute;

            right:
                0;

            bottom:
                0;

            width:
                48%;

            height:
                245px;

            object-fit:
                cover;

            border:
                9px solid #fff;

            border-radius:
                18px;

            box-shadow:
                var(--shadow-card);
        }


        .cc-image-badge {

            position:
                absolute;

            left:
                25px;

            bottom:
                35px;

            z-index:
                4;

            width:
                125px;

            height:
                125px;

            display:
                flex;

            flex-direction:
                column;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            background:
                var(--mc-orange);

            color:
                var(--mc-brown);

            text-align:
                center;

            box-shadow:
                0 15px 35px rgba(61,17,9,.22);
        }


        .cc-image-badge strong {

            font-family:
                "Playfair Display",
                serif;

            font-size:
                28px;

            line-height:
                1;
        }


        .cc-image-badge span {

            max-width:
                80px;

            margin-top:
                5px;

            font-size:
                9px;

            font-weight:
                800;

            line-height:
                1.2;

            text-transform:
                uppercase;
        }


        .cc-section-kicker {

            margin-bottom:
                11px;

            color:
                #b75d27;

            font-size:
                11px;

            font-weight:
                800;

            letter-spacing:
                1.3px;

            text-transform:
                uppercase;
        }


        .cc-section-title {

            margin:
                0 0 20px;

            font-family:
                "Playfair Display",
                Georgia,
                serif;

            color:
                var(--mc-brown);

            font-size:
                clamp(36px, 4vw, 53px);

            line-height:
                1.08;

            letter-spacing:
                -1px;
        }


        .cc-section-title span {

            color:
                var(--mc-orange);
        }


        .cc-section-text {

            color:
                var(--mc-muted);

            font-size:
                15px;

            line-height:
                1.8;
        }


        .cc-intro-points {

            display:
                grid;

            grid-template-columns:
                1fr 1fr;

            gap:
                15px;

            margin:
                27px 0 30px;

            padding:
                0;

            list-style:
                none;
        }


        .cc-intro-points li {

            display:
                flex;

            align-items:
                flex-start;

            gap:
                9px;

            font-size:
                12px;

            font-weight:
                700;

            color:
                var(--mc-text);
        }


        .cc-intro-points i {

            margin-top:
                3px;

            color:
                var(--mc-orange);
        }


        /* =====================================================
           WHAT YOU WILL LEARN
           ===================================================== */

        .cc-learn {

            padding:
                105px 0;

            background:
                var(--mc-cream);
        }


        .cc-heading-center {

            max-width:
                720px;

            margin:
                0 auto 55px;

            text-align:
                center;
        }


        .cc-heading-center .cc-section-title {

            margin-bottom:
                15px;
        }


        .cc-heading-center p {

            margin:
                0;

            color:
                var(--mc-muted);

            font-size:
                15px;
        }


        .cc-learn-grid {

            display:
                grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap:
                20px;
        }


        .cc-learn-card {

            position:
                relative;

            min-height:
                245px;

            overflow:
                hidden;

            border-radius:
                16px;

            background:
                #fff;

            box-shadow:
                0 8px 25px rgba(61,17,9,.07);

            transition:
                .25s ease;
        }


        .cc-learn-card:hover {

            transform:
                translateY(-5px);

            box-shadow:
                var(--shadow-card);
        }


        .cc-learn-card-image {

            height:
                135px;

            overflow:
                hidden;
        }


        .cc-learn-card-image img {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                .35s ease;
        }


        .cc-learn-card:hover img {

            transform:
                scale(1.05);
        }


        .cc-learn-card-content {

            padding:
                17px 18px;
        }


        .cc-learn-card-content h3 {

            margin:
                0 0 6px;

            color:
                var(--mc-brown);

            font-size:
                15px;
        }


        .cc-learn-card-content p {

            margin:
                0;

            color:
                var(--mc-muted);

            font-size:
                11px;

            line-height:
                1.55;
        }


        /* =====================================================
           CLASS FORMATS
           ===================================================== */

        .cc-formats {

            padding:
                105px 0;
        }


        .cc-format-grid {

            display:
                grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap:
                22px;
        }


        .cc-format-card {

            position:
                relative;

            padding:
                34px 28px;

            border:
                1px solid var(--mc-border);

            border-radius:
                18px;

            background:
                #fff;

            transition:
                .25s ease;
        }


        .cc-format-card.featured {

            border:
                2px solid var(--mc-orange);

            box-shadow:
                var(--shadow-card);
        }


        .cc-format-card:hover {

            transform:
                translateY(-5px);
        }


        .cc-format-label {

            display:
                inline-block;

            margin-bottom:
                19px;

            padding:
                5px 9px;

            border-radius:
                30px;

            background:
                var(--mc-cream);

            color:
                #b75d27;

            font-size:
                9px;

            font-weight:
                800;

            letter-spacing:
                .8px;

            text-transform:
                uppercase;
        }


        .cc-format-card h3 {

            margin:
                0 0 10px;

            font-family:
                "Playfair Display",
                serif;

            color:
                var(--mc-brown);

            font-size:
                28px;
        }


        .cc-format-card p {

            margin:
                0 0 22px;

            color:
                var(--mc-muted);

            font-size:
                12px;

            line-height:
                1.7;
        }


        .cc-format-list {

            margin:
                0 0 25px;

            padding:
                0;

            list-style:
                none;
        }


        .cc-format-list li {

            display:
                flex;

            gap:
                8px;

            margin-bottom:
                11px;

            color:
                var(--mc-text);

            font-size:
                11px;
        }


        .cc-format-list i {

            color:
                var(--mc-orange);

            margin-top:
                4px;
        }


        /* =====================================================
           EXPERIENCE SECTION
           ===================================================== */

        .cc-experience {

            padding:
                105px 0;

            color:
                #fff;

            background:
                var(--mc-brown);
        }


        .cc-experience-grid {

            display:
                grid;

            grid-template-columns:
                .9fr 1.1fr;

            gap:
                80px;

            align-items:
                center;
        }


        .cc-experience .cc-section-title {

            color:
                #fff;
        }


        .cc-experience .cc-section-text {

            color:
                rgba(255,255,255,.66);
        }


        .cc-experience-steps {

            display:
                grid;

            gap:
                14px;

            margin-top:
                28px;
        }


        .cc-step {

            display:
                grid;

            grid-template-columns:
                45px 1fr;

            gap:
                13px;

            padding:
                17px;

            border:
                1px solid rgba(255,255,255,.10);

            border-radius:
                13px;

            background:
                rgba(255,255,255,.04);
        }


        .cc-step-number {

            width:
                45px;

            height:
                45px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            background:
                var(--mc-orange);

            color:
                var(--mc-brown);

            font-size:
                12px;

            font-weight:
                900;
        }


        .cc-step h3 {

            margin:
                1px 0 3px;

            color:
                #fff;

            font-size:
                14px;
        }


        .cc-step p {

            margin:
                0;

            color:
                rgba(255,255,255,.54);

            font-size:
                11px;

            line-height:
                1.55;
        }


        .cc-experience-image {

            position:
                relative;
        }


        .cc-experience-image img {

            width:
                100%;

            height:
                550px;

            object-fit:
                cover;

            border-radius:
                20px;
        }


        .cc-experience-caption {

            position:
                absolute;

            right:
                20px;

            bottom:
                20px;

            max-width:
                260px;

            padding:
                18px;

            border-radius:
                14px;

            background:
                rgba(38,10,5,.9);

            backdrop-filter:
                blur(10px);
        }


        .cc-experience-caption strong {

            display:
                block;

            margin-bottom:
                4px;

            color:
                var(--mc-orange);

            font-family:
                "Playfair Display",
                serif;

            font-size:
                20px;
        }


        .cc-experience-caption span {

            color:
                rgba(255,255,255,.67);

            font-size:
                10px;
        }


        /* =====================================================
           WHO IS IT FOR
           ===================================================== */

        .cc-audience {

            padding:
                105px 0;

            background:
                #fff;
        }


        .cc-audience-grid {

            display:
                grid;

            grid-template-columns:
                repeat(4, 1fr);

            gap:
                16px;
        }


        .cc-audience-card {

            padding:
                27px 20px;

            border-radius:
                15px;

            background:
                var(--mc-cream);

            text-align:
                center;
        }


        .cc-audience-icon {

            width:
                55px;

            height:
                55px;

            margin:
                0 auto 14px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            background:
                #fff;

            color:
                var(--mc-orange);

            box-shadow:
                0 5px 15px rgba(61,17,9,.07);
        }


        .cc-audience-card h3 {

            margin:
                0 0 7px;

            color:
                var(--mc-brown);

            font-size:
                14px;
        }


        .cc-audience-card p {

            margin:
                0;

            color:
                var(--mc-muted);

            font-size:
                10px;

            line-height:
                1.55;
        }


        /* =====================================================
           PRIVATE / GROUP CTA
           ===================================================== */

        .cc-private {

            padding:
                85px 0;

            background:
                var(--mc-cream);
        }


        .cc-private-box {

            display:
                grid;

            grid-template-columns:
                1.25fr .75fr;

            overflow:
                hidden;

            border-radius:
                22px;

            background:
                var(--mc-orange);
        }


        .cc-private-content {

            padding:
                55px;
        }


        .cc-private-content h2 {

            margin:
                0 0 14px;

            max-width:
                600px;

            color:
                var(--mc-brown);

            font-family:
                "Playfair Display",
                serif;

            font-size:
                clamp(34px,4vw,50px);

            line-height:
                1.08;
        }


        .cc-private-content p {

            max-width:
                600px;

            margin:
                0 0 25px;

            color:
                rgba(61,17,9,.72);

            font-size:
                14px;

            line-height:
                1.7;
        }


        .cc-private-image {

            min-height:
                350px;

            background:
                url("assets/images/private-culinary-class.jpg")
                center / cover no-repeat;
        }


        /* =====================================================
           TESTIMONIAL / SOCIAL PROOF
           ===================================================== */

        .cc-social {

            padding:
                105px 0;
        }


        .cc-testimonials {

            display:
                grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap:
                20px;
        }


        .cc-testimonial {

            padding:
                27px;

            border:
                1px solid var(--mc-border);

            border-radius:
                16px;

            background:
                #fff;
        }


        .cc-stars {

            margin-bottom:
                14px;

            color:
                var(--mc-orange);

            font-size:
                12px;

            letter-spacing:
                2px;
        }


        .cc-testimonial blockquote {

            margin:
                0 0 20px;

            color:
                var(--mc-text);

            font-family:
                "Playfair Display",
                serif;

            font-size:
                17px;

            line-height:
                1.55;
        }


        .cc-testimonial-author {

            display:
                flex;

            align-items:
                center;

            gap:
                10px;
        }


        .cc-author-avatar {

            width:
                37px;

            height:
                37px;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            border-radius:
                50%;

            background:
                var(--mc-cream);

            color:
                var(--mc-brown);

            font-size:
                12px;

            font-weight:
                800;
        }


        .cc-testimonial-author strong {

            display:
                block;

            font-size:
                11px;
        }


        .cc-testimonial-author span {

            color:
                var(--mc-muted);

            font-size:
                9px;
        }


        /* =====================================================
           FAQ
           ===================================================== */

        .cc-faq {

            padding:
                105px 0;

            background:
                var(--mc-cream);
        }


        .cc-faq-list {

            max-width:
                850px;

            margin:
                0 auto;

            display:
                grid;

            gap:
                10px;
        }


        .cc-faq details {

            padding:
                0 20px;

            border:
                1px solid var(--mc-border);

            border-radius:
                12px;

            background:
                #fff;
        }


        .cc-faq summary {

            padding:
                19px 0;

            cursor:
                pointer;

            list-style:
                none;

            color:
                var(--mc-brown);

            font-size:
                13px;

            font-weight:
                800;
        }


        .cc-faq summary::-webkit-details-marker {

            display:
                none;
        }


        .cc-faq summary::after {

            content:
                "+";

            float:
                right;

            color:
                var(--mc-orange);

            font-size:
                20px;
        }


        .cc-faq details[open] summary::after {

            content:
                "−";
        }


        .cc-faq details p {

            margin:
                0;

            padding:
                0 0 20px;

            color:
                var(--mc-muted);

            font-size:
                12px;

            line-height:
                1.7;
        }


        /* =====================================================
           FINAL CTA
           ===================================================== */

        .cc-final {

            position:
                relative;

            overflow:
                hidden;

            padding:
                105px 0;

            background:
                var(--mc-brown-dark);

            color:
                #fff;
        }


        .cc-final::before {

            content:
                "";

            position:
                absolute;

            width:
                420px;

            height:
                420px;

            top:
                -230px;

            right:
                -120px;

            border-radius:
                50%;

            background:
                rgba(255,145,77,.12);
        }


        .cc-final-content {

            position:
                relative;

            z-index:
                2;

            max-width:
                780px;

            margin:
                0 auto;

            text-align:
                center;
        }


        .cc-final-content .cc-section-kicker {

            color:
                var(--mc-orange);
        }


        .cc-final h2 {

            margin:
                0 0 17px;

            font-family:
                "Playfair Display",
                serif;

            font-size:
                clamp(38px,5vw,61px);

            line-height:
                1.06;

            letter-spacing:
                -1px;
        }


        .cc-final p {

            max-width:
                650px;

            margin:
                0 auto 29px;

            color:
                rgba(255,255,255,.63);

            font-size:
                14px;

            line-height:
                1.7;
        }


        .cc-final-actions {

            display:
                flex;

            justify-content:
                center;

            flex-wrap:
                wrap;

            gap:
                12px;
        }


        /* =====================================================
           RESPONSIVE
           ===================================================== */

        @media (max-width: 950px) {

            .cc-intro-grid,
            .cc-experience-grid {

                grid-template-columns:
                    1fr;

                gap:
                    50px;
            }


            .cc-image-stack {

                max-width:
                    650px;

                width:
                    100%;

                margin:
                    auto;
            }


            .cc-value-grid {

                grid-template-columns:
                    repeat(2,1fr);
            }


            .cc-value-item:nth-child(2) {

                border-right:
                    0;
            }


            .cc-learn-grid {

                grid-template-columns:
                    repeat(2,1fr);
            }


            .cc-format-grid {

                grid-template-columns:
                    1fr;
            }


            .cc-audience-grid {

                grid-template-columns:
                    repeat(2,1fr);
            }


            .cc-private-box {

                grid-template-columns:
                    1fr;
            }


            .cc-private-image {

                min-height:
                    300px;

                order:
                    -1;
            }


            .cc-testimonials {

                grid-template-columns:
                    1fr;
            }
        }


        @media (max-width: 650px) {

            .cc-container {

                width:
                    calc(100% - 28px);
            }


            .cc-hero {

                min-height:
                    730px;
            }


            .cc-hero-bg {

                background-position:
                    58% center;
            }


            .cc-hero-overlay {

                background:
                    linear-gradient(
                        180deg,
                        rgba(38,10,5,.92) 0%,
                        rgba(61,17,9,.79) 55%,
                        rgba(61,17,9,.55) 100%
                    );
            }


            .cc-hero-content {

                padding:
                    85px 0 90px;
            }


            .cc-hero h1 {

                font-size:
                    47px;

                letter-spacing:
                    -1.4px;
            }


            .cc-hero-description {

                font-size:
                    15px;
            }


            .cc-hero-actions {

                flex-direction:
                    column;
            }


            .cc-hero-actions .cc-btn {

                width:
                    100%;
            }


            .cc-value-grid {

                grid-template-columns:
                    1fr 1fr;
            }


            .cc-value-item {

                padding:
                    15px 10px;

                border-right:
                    1px solid rgba(255,255,255,.12);

                border-bottom:
                    1px solid rgba(255,255,255,.12);
            }


            .cc-value-item:nth-child(2) {

                border-right:
                    0;
            }


            .cc-value-item:nth-child(3),
            .cc-value-item:nth-child(4) {

                border-bottom:
                    0;
            }


            .cc-value-item strong {

                font-size:
                    10px;
            }


            .cc-value-item span {

                display:
                    none;
            }


            .cc-intro,
            .cc-learn,
            .cc-formats,
            .cc-experience,
            .cc-audience,
            .cc-social,
            .cc-faq {

                padding:
                    75px 0;
            }


            .cc-image-stack {

                min-height:
                    410px;
            }


            .cc-main-image {

                width:
                    86%;

                height:
                    330px;
            }


            .cc-small-image {

                width:
                    50%;

                height:
                    190px;
            }


            .cc-image-badge {

                width:
                    95px;

                height:
                    95px;

                left:
                    10px;

                bottom:
                    25px;
            }


            .cc-image-badge strong {

                font-size:
                    23px;
            }


            .cc-intro-points {

                grid-template-columns:
                    1fr;
            }


            .cc-learn-grid {

                grid-template-columns:
                    1fr;
            }


            .cc-audience-grid {

                grid-template-columns:
                    1fr 1fr;
            }


            .cc-private-content {

                padding:
                    35px 25px;
            }


            .cc-private-image {

                min-height:
                    240px;
            }


            .cc-final {

                padding:
                    80px 0;
            }

        }



/* ==================== Bottom Navigation ==================== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  display: flex !important;          /* force visible on all screens */
  justify-content: space-around;
  align-items: center;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom); /* iPhone safe area */
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #eb8a51;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 4px;
  transition: color 0.2s ease;
  height: 100%;
}

.nav-item i {
  display: block;
  font-size: 20px;
  margin-bottom: 3px;
}

.nav-item.active,
.nav-item:hover {
  color: #c74d06;
}

/* Desktop / large screens */
@media (min-width: 768px) {
  .bottom-nav {
    height: 50px;
  }
  .nav-item {
    font-size: 12px;
  }
  .nav-item i {
    font-size: 22px;
  }
  /* Prevent content from being hidden behind the nav */
  body {
    padding-bottom: 110px !important;
  }
}

@media (min-width: 480px) {
    .bottom-nav {
        height: 50px;
    }
    .nav-item {
        font-size: 11px;
    }
    .nav-item i {
        font-size: 20px;
    }
    body {
        padding-bottom: 90px !important;
    }
}