:root {
            --zen-green: #0F542F;
            --zen-light-green: #FFFBF6;
            --zen-yellow: #D3E26B;
        }

        .text-green{color: var(--zen-green) !important;}
        .text-yellor{color: var(--zen-yellow) !important;}
        .light-bg{background:#EEF5CE;}
        .py-100{padding-top: 100px; padding-bottom: 100px;}
        .radius-125{border-radius: 125px;}
        body {
           font-family: "Wix Madefor Display", sans-serif;
            background-color: #FFFBF6;
            padding-bottom: 40px;
            overflow-x: hidden;
        }
        .pt-100{padding-top: 100px !important;}

        .fs-54{font-size: 54px !important;}
        .fs-20{font-size: 20px !important;}
        .fs-21{font-size: 21px !important;}
        .fs-18{font-size: 18px !important;}
        .fs-16{font-size: 16px !important;}

        .fw-300{font-weight: 300 !important;}
        .fw-400{font-weight: 400 !important;}
        .fw-500{font-weight: 500 !important;}
        .fw-600{font-weight: 600 !important;}
        .fw-700{font-weight: 700 !important;}

        /* Fixed Logo */
    .fixed-logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: var(--zen-yellow);
    padding: 10px 15px;
    border-radius: 0px 0px 28px;
    font-weight: bold;
    color: var(--zen-green);
    font-size: 18px;
    height: 132px;
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

        /* Hero Section with Video Background */
        .hero-section {
            position: relative;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-video {
    position: absolute;
    top: 40px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    max-width: calc(100% - 80px);
    left: 40px;
}

        .hero-content {
            text-align: center;
            z-index: 2;
            max-width: 920px;
            padding: 0 20px;
            margin-top: 80px;
        }

        .hero-title {
            font-size: 3.5rem;
            font-weight: bold;
            color: var(--zen-green);
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .hero-subtitle {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 30px;
        }

        .hero-button {
    background: var(--zen-yellow);
    color: var(--zen-green);
    border: none;
    padding: 15px 20px;
    border-radius: 24px;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s ease;
    width: 58px;
    height: 58px;
    margin-top: 30px;
    position: absolute;
    bottom: 150px;
}


.video-circle-2 .circle-video{
    /* size & ratio */
    width:100%;          /* any length */
    aspect-ratio: 1 / 1;   /* stays square so the circle is perfect */
    border-radius: 125px;
    object-fit: cover;     /* crops excess, keeps media from squashing */
  
  }
        .hero-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        /* Section Styling */
        .section {
            padding: 100px 0;
            position: relative;
        }

        .section-title {
            font-size: 54px;
            font-weight: bold;
            color: var(--zen-green);
            margin-bottom: 20px;
        }

.section-text {
    font-size: 18px;
    color: #627E6F;
    line-height: 26px;
    margin-bottom: 30px;
    max-width: 800px;
}
.relative{position: relative;}
.grid-img{border-radius: 125px;}
.dish-image{position: absolute; right: 0; top: 0;}
img{max-width: 100%;}
.dish-image {position: absolute; right: -70px; top: -70px; max-width: 300px;}
.rotating-logo img{max-width: 320px;}
span.num-right
 {
    display: block;
    background: #E5EDCC;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 40px;
    top:100px;
    border-radius: 24px;
    font-size: 18px;
    font-weight: 700;
}

span.num-left{left: 40px; right: inherit;}
        /* Robotics Section with Video */
        .robotics-video {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 15px;
        }

        /* App Section */
        .app-section {
            background: var(--zen-green);
            color: white;
        }

        .app-section .section-title {
            color: white;
        }

        .app-section .section-text {
            color: #e9ecef;
        }

        .phone-mockup {
            max-width: 100%;
            height: auto;
        }

        /* Restaurant Section */
        .restaurant-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 15px;
        }

        /* About Section */
        .about-image {
            width: 100%;
            height: 400px;
            object-fit: cover;
            border-radius: 15px;
        }

        /* Contact Section */
        .contact-section {
            background: var(--zen-light-green);
            padding: 80px 0;
        }

        .contact-item {
            text-align: center;
            padding: 20px;
        }

        .contact-icon {
            font-size: 2rem;
            color: var(--zen-green);
            margin-bottom: 15px;
        }

        .contact-item h5, .contact-item a {
    color: var(--zen-green);
    font-size: 18px;
    line-height: 26px;
    margin-top: 20px;
    display: block; text-decoration: none;
}

        /* Footer */
      .footer {
    background: var(--zen-green);
    color: white;
    padding: 150px 0 80px !important;
    border-radius: 65px;
}

.footer .top-row {
    padding-bottom: 90px;
}

.copy-right-ul{list-style: none;}
        /* Fixed Bottom Menu - Desktop */
        .bottom-menu {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--zen-green);
            border-radius:18px;
           padding: 12px 12px;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap:10px;
        }

        

        .bottom-menu .logo{padding: 0px;}

        .bottom-menu a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 13px 16px;
            border: 1px solid #327451;
            border-radius: 12px;
            font-size: 14px;
        }

        .bottom-menu a:hover {
            background: rgba(255,255,255,0.2);
            color: var(--zen-yellow);
        }

        /* Mobile Menu */
      .mobile-menu {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none;
    width: 217px;
}

.mobile-menu-toggle {
    background: var(--zen-green);
    color: white;
    border: none;
    padding: 12px 12px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    transition: all 0.3s ease;
        width: 217px;
}

.mobile-menu-toggle span, .mobile-menu-items a {
    font-size: 14px;
    padding: 14.5px 15px;
    border-radius: 12px;
    border: 1px solid #327451;
    text-align: center;
}
        .mobile-menu-items {
            position: absolute;
            bottom: 85px;
            left: 0;
            right: 0;
            background: var(--zen-green);
            border-radius: 15px;
            padding: 20px;
            transform: translateY(20px) scale(0.9);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .mobile-menu-items.active {
            transform: translateY(0) scale(1);
            opacity: 1;
            visibility: visible;
        }

        .mobile-menu-items a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 12px 20px;
            border-radius: 8px;
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }

        .mobile-menu-items a:hover {
            background: rgba(255,255,255,0.2);
        }

        .menu-arrow {
            transition: transform 0.3s ease;
        }

        .menu-arrow.rotated {
            transform: rotate(180deg);
        }

        .mob-intro{display: none;}

        
        /* Floating Elements */
        .floating-element {
            position: absolute;
            border: 1px solid #EDE7DF;
            border-radius: 50%;
            opacity: 0.7;
        }

       .floating-1 {

    height: 135vh;
    aspect-ratio: 1 / 1;
    top: -10%;
    z-index: -1;
    right: -40%;
}

   .circle-left {
 
    height: 135vh;
    aspect-ratio: 1 / 1;
    top: -30%;
    left: -40%;
    z-index: -1;
}



        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        .about-p{max-width: 310px;}
        /* Responsive */
        @media (min-width: 1400px) {

                .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width:calc(100% - 80px);
    }

        }
        
            @media (max-width: 768px) {

                 .floating-1{display: none;}

                .mob-intro{display: block;}
                .desktop-intro{display: none !important;}
            .bottom-menu {
                display: none;
            }
            
            .mobile-menu {
                display: block;
            }

            .hero-title {
                font-size: 2.5rem;
            }

            .section {
                padding: 50px 0;
            }

            .section-title {
                font-size:40px; font-weight: 500; color: var(--zen-green);
            }
            .circle-left{display: none;}

            .hero-video {top:0px;  max-width: 100%; left: 0;}
            .dish-image {position: absolute; right: 0; top: -60px; max-width: 200px;}
            .hero-title {font-size: 2.2rem !important;}
            .hero-section .hero-title {margin-bottom: 10px !important;}
            .hero-title br{display: none;}
            .hero-button{left: 0; right: 0; margin: 0 auto;}
            .hero-subtitle {font-size: 16px !important; margin-bottom: 0px !important;}
            .hero-subtitle br{display: none;}
            .hero-content{margin-top: 100px;}

            .video-circle-2 .circle-video { width: 100%; aspect-ratio: 3 / 4; border-radius: 80px; object-fit: cover;}
               span.num-right.mob-intro {
        position: relative;
        top: inherit;
        right: inherit;
        left: inherit;
        bottom: inherit;
        justify-content: center;
        margin: 0 auto;
        margin-bottom: 15px;
    }
            .sec-text{text-align: center; padding: 0px !important;}
            .mob-column-revers{flex-direction: column-reverse;}
            img.grid-img {aspect-ratio: 3 / 4; object-fit: cover; border-radius: 80px;}

            .fixed-logo {height: 98px; width: 122px;}
            .fixed-logo img {max-width: 74px;}
            .contact-section {padding: 50px 0;}
            .radius-125{border-radius: 80px;}
            .rotating-logo img {max-width: 260px;}
            .contact-section .section-title {font-size: 40px;}
            .contact-item h5, .contact-item a {font-size: 16px; line-height: 20px;}
            .contact-item h5 {border-bottom: 1px solid #B8C8A9; padding-bottom: 15px;}
            .footer {padding: 50px 30px 50px !important; text-align: center;}
               .footer .w-auto {width: 100% !important; margin: 30px 0px;}
               .copy-right-ul{flex-wrap: wrap; padding-left: 0px;}
               .copy-right-ul li{width: 100%;}
           .footer .top-row {padding-bottom: 20px;}
           body {padding-bottom: 120px;}
        
        }

          @media (max-width: 667px) {

            .section-title {font-size: 32px;}
                .hero-title {
        font-size: 1.6rem !important;
    }

}