@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
*, ::after, ::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
    line-height: 1.8;
}
h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
}

.flex {
    display: flex;
}
.k-container {
    width: 90%;
    margin: auto;
}

ul {
    list-style: none;
}
a {
    text-decoration: none;
}
img {
    width: 100%;
}

:root {
    --dark-grey: #1A202A;
    --orange: #F58634;
}
/* header starts here  */
.header-main {
    background-color: var(--dark-grey);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(245, 134, 52, 0.2);
}
.header-left {
    width: 15%;
}
.header-left img {
    width: 45%;
}
.header-menu {
    width: 85%;
    color: #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 5rem;
}
.header-menu .menu {
    width: 100%;
    display: flex;
    justify-content: right;
}
.header-menu ul {
    /* gap: 5rem; */
    width: 80%;
    justify-content: space-between;
}
.header-menu ul li a {
    color: #D9D9D9;
    font-size: 1.15rem;
    transition: all 0.4s ease-in-out;
}
.header-menu ul li a:hover {
    color: var(--orange)
}

/* footer starts here  */
.footer-main {
    padding: 4rem 0;
}
.footer-main p {
    font-size: 1.1rem;
    color: #fff;
}
.footer-container {
    background-color: var(--dark-grey);
    padding: 4rem 3rem;
    border-radius: 20px;
    padding-bottom: 2rem;
}
.footer-top-box:nth-child(1) {
    width: 25%;
} 
.footer-top-box:nth-child(1) img {
    width: 30%;
}
.footer-top-box:nth-child(2) {
     width: 20%;
}
.footer-top-box:nth-child(3) {
     width: 20%;
}
.footer-top-box:nth-child(4) {
     width: 35%;
} 

.footer-top-box h4 {
    font-size: 1.2rem;
    color: var(--orange);
    margin-bottom: 1rem;
    font-weight: 500;
}
.footer-top-box ul li {
    margin: 1rem 0;
}
.footer-top-box ul li a {
    color: #fff;
    font-weight: 300;
    
}
.footer-top {
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(245, 134, 52, 0.3);
}
.footer-bottom {
    width: 100%;
}
.footer-bottom div {
    width: 50%;
    font-weight: 300;
    
}
.footer-bottom div p {
    font-size: 0.95rem;
}
.footer-bottom-left p {
    padding: 1rem 2rem;
    text-align: left;
}
.footer-bottom-right  p{
    padding: 1rem 2rem;
    text-align: right;
}
.cta-main {
    margin-top: 4rem;
}
.cta-left {
    display: flex;
    width: 70%;
    padding: 0 3rem;
}
.cta-left img {
    width: 8%;
    margin-right: 1rem;
}
.cta-left h3 {
    font-size: 2rem;
    font-weight: 500;
}
.cta-right {
    width: 30%;
    display: flex;
    padding-right: 2rem;
    align-items: center;
    justify-content: right;
}
.cta-right a {
    font-size: 1.1rem;
    background-color: #F9F9F9;
    border-radius: 6px;
    padding: 0.6rem 2.5rem;
    color: #000;
    transition: all 0.2s cubic-bezier(.25,.75,.86,.11);
}
.cta-right a:hover {
    background-color: var(--dark-grey);
    color: var(--orange);
}
/* home page css  */
.home-hero {
    background-color: var(--dark-grey);
}
.home-hero-left {
    width: 50%;
    display: flex;
    justify-items: center;
    align-items: center;
    position: relative;
}
.home-hero-left .home-hero-design1 {
    position: absolute;
    right: 10%;
    top: 10%;
    animation: opacity 3s ease-in-out infinite;
}
.home-hero-left .home-hero-design2 {
    position: absolute;
    right: 50%;
    bottom: 10%;
    animation: opacity 3s ease-in-out infinite;
}
@keyframes opacity {
    0% { opacity: 1; }    
    50% { opacity: 0.3; }
    100% { opacity: 1; } 
}
.home-hero-left h1 {
    font-size: 3.6rem;
    width: 90%;
    color: #fff;
    /* margin: 2rem 0; */
    line-height: 1.2;
    font-weight: 600;
}
.home-hero-left p {
    font-size: 1.1rem;
    color: #D9D9D9;
    width: 85%;
    margin: 3rem 0;
}
.home-hero-left a {
    font-size: 1rem;
    color: #fff;
    background-color: var(--orange);
    padding: 0.6rem 1.6rem;
    transition: all 0.4s ease-in-out;
}
.home-hero-left a:hover {
    background-color: #fff;
    color: var(--dark-grey)
    
}
.home-hero-left h1 span {
    color: var(--orange);
}
.home-hero-right {
    width: 50%;
}
.home-highlights {
    padding: 2rem 0;
}
.home-highlights h2 {
    font-size: 2.4rem;
    font-weight: 500;
}
.home-highlights-box:nth-child(1) {
    width: 40%;
}
.home-highlights-box:nth-child(2) {
    width: 30%;
    text-align: center;
}
.home-highlights-box:nth-child(3) {
    width: 30%;
    text-align: center;
}
.home-highlights-box strong {
    font-size: 2.2rem;
}
.home-highlights-box p {
    font-size: 1.2rem;
    color: #5E5858;
    margin-top: -0.5rem;
}
.home-menu {
    background-color: #F4F4F4;
    padding: 6rem 0;
    margin-bottom: 5rem;
}
.home-menu h4 {
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
    width: 70%;
    margin: auto;
}
.home-menu-wrapper {
    padding: 8rem 0;
    width: 95%;
    margin: auto;
    justify-content: space-around;
}
.home-menubox {
    width: 20%;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    position: relative;
    padding-bottom: 2rem;
    cursor: pointer;
}

.home-menubox .home-menuimg {
   margin-top: -5rem;
   margin-bottom: 1rem;
   text-align: center;
   display: flex;
   justify-content: center;
}
.home-menubox .home-menu-emoji {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    line-height: 1;
    box-shadow: 0 12px 30px rgba(26, 32, 42, 0.12);
    transition: all 0.4s ease-in-out;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
}
.home-menuimg-tea .home-menu-emoji {
    background: linear-gradient(135deg, #FFE8D6 0%, #FFD0A8 100%);
}
.home-menuimg-snack .home-menu-emoji {
    background: linear-gradient(135deg, #FFE0E0 0%, #FFC4C4 100%);
}
.home-menuimg-shake .home-menu-emoji {
    background: linear-gradient(135deg, #E0EBFF 0%, #BBD2FF 100%);
}
.home-menubox:hover .home-menu-emoji {
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 18px 40px rgba(26, 32, 42, 0.18);
}
.home-menubox a {
    font-size: 1.4rem;
    color: #000;

}
.home-menubox img {
    width: 40%;
}
.home-menu-more {
    text-align: center;
}
.home-menu-more a {
    font-size: 1.1rem;
    padding: 0.7rem 2rem;
    color: #000;
    background-color: #fff;
    border-radius: 6px;
    transition: all 0.4s ease-in-out;
}
.home-menu-more a:hover {
    background-color: var(--dark-grey);
    color: var(--orange)
}

/* ====================================== */
/* shared page hero (about, contact, menu, franchise) */
/* ====================================== */
.page-hero {
    background-color: var(--dark-grey);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}
.page-hero-content {
    text-align: center;
    position: relative;
    width: 80%;
    margin: auto;
}
.page-hero-content h1 {
    font-size: 3.4rem;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}
.page-hero-content h1 span {
    color: var(--orange);
}
.page-hero-content p {
    font-size: 1.1rem;
    color: #D9D9D9;
    width: 70%;
    margin: 1.5rem auto 0;
}
.page-hero-design1 {
    position: absolute;
    left: 5%;
    top: -1rem;
    animation: opacity 3s ease-in-out infinite;
}
.page-hero-design1 img {
    width: 60%;
}
.page-hero-design2 {
    position: absolute;
    right: 5%;
    bottom: -1rem;
    animation: opacity 3s ease-in-out infinite;
}
.page-hero-design2 img {
    width: 60%;
}

/* ====================================== */
/* about page */
/* ====================================== */
.about-story {
    padding: 6rem 0;
}
.about-story-container {
    align-items: center;
    gap: 4rem;
}
.about-story-left {
    width: 45%;
}
.about-story-right {
    width: 55%;
}
.about-story-right h2 {
    font-size: 2.6rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.about-story-right h2 span,
.about-values h4 span,
.about-mission-box h3 span {
    color: var(--orange);
}
.about-story-right p {
    font-size: 1.05rem;
    color: #5E5858;
    margin-bottom: 1rem;
}

.about-values {
    background-color: #F4F4F4;
    padding: 5rem 0;
}
.about-values h4 {
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 3rem;
}
.about-values-wrapper {
    justify-content: space-between;
    gap: 2rem;
}
.about-values-box {
    width: 32%;
    background-color: #fff;
    padding: 2.5rem 2rem;
    border-radius: 10px;
    text-align: center;
    transition: all 0.4s ease-in-out;
}
.about-values-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(26, 32, 42, 0.08);
}
.about-values-box i {
    font-size: 2.6rem;
    color: var(--orange);
    margin-bottom: 1rem;
    display: inline-block;
}
.about-values-box h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: var(--dark-grey);
}
.about-values-box p {
    color: #5E5858;
    font-size: 1rem;
}

.about-mission {
    padding: 5rem 0;
}
.about-mission-container {
    gap: 2rem;
    justify-content: space-between;
}
.about-mission-box {
    width: 49%;
    background-color: var(--dark-grey);
    padding: 3rem 2.5rem;
    border-radius: 12px;
    color: #fff;
}
.about-mission-box h3 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 1rem;
}
.about-mission-box p {
    color: #D9D9D9;
    font-size: 1.05rem;
}

/* ====================================== */
/* contact page */
/* ====================================== */
.contact-info {
    padding: 5rem 0;
}
.contact-info-wrapper {
    justify-content: space-between;
    gap: 2rem;
}
.contact-info-box {
    width: 32%;
    padding: 2.5rem 2rem;
    border-radius: 10px;
    text-align: center;
    background-color: #F4F4F4;
    transition: all 0.4s ease-in-out;
}
.contact-info-box:hover {
    background-color: var(--dark-grey);
}
.contact-info-box:hover h3,
.contact-info-box:hover p {
    color: #fff;
}
.contact-info-box i {
    font-size: 2.4rem;
    color: var(--orange);
    margin-bottom: 1rem;
    display: inline-block;
}
.contact-info-box h3 {
    font-size: 1.4rem;
    margin-bottom: 0.7rem;
    color: var(--dark-grey);
}
.contact-info-box p {
    font-size: 1rem;
    color: #5E5858;
}

.contact-form-section {
    background-color: #F4F4F4;
    padding: 6rem 0;
    position: relative;
}
.contact-form-container {
    gap: 0;
    align-items: stretch;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(26, 32, 42, 0.08);
    overflow: hidden;
}

/* left dark info panel */
.contact-form-left {
    width: 42%;
    background: linear-gradient(135deg, #1A202A 0%, #2a3142 100%);
    padding: 3rem 2.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.contact-form-left::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background-color: rgba(245, 134, 52, 0.15);
    border-radius: 50%;
}
.contact-form-left::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 220px;
    height: 220px;
    background-color: rgba(245, 134, 52, 0.08);
    border-radius: 50%;
}
.contact-form-left > * {
    position: relative;
    z-index: 1;
}
.contact-tag {
    display: inline-block;
    background-color: rgba(245, 134, 52, 0.18);
    color: var(--orange);
    font-size: 0.8rem;
    padding: 0.35rem 1rem;
    border-radius: 30px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    margin-bottom: 1rem;
}
.contact-form-left h2 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
    line-height: 1.2;
}
.contact-form-left h2 span,
.franchise-form-left h2 span {
    color: var(--orange);
}
.contact-form-left p {
    color: #D9D9D9;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.contact-form-left ul {
    margin-bottom: 2rem;
}
.contact-form-left ul li {
    color: #D9D9D9;
    font-size: 0.98rem;
    margin: 0.6rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.contact-form-left ul li i {
    color: var(--orange);
    font-size: 1.1rem;
}

.contact-left-quick {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contact-left-quick-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.contact-left-quick-item i {
    width: 42px;
    height: 42px;
    background-color: rgba(245, 134, 52, 0.15);
    color: var(--orange);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.contact-left-quick-item span {
    display: block;
    font-size: 0.78rem;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.contact-left-quick-item a {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s ease;
}
.contact-left-quick-item a:hover {
    color: var(--orange);
}

/* right form panel */
.contact-form-right {
    width: 58%;
    background-color: #fff;
    padding: 3rem 2.5rem;
}
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.contact-form-row {
    display: flex;
    gap: 1.2rem;
}
.contact-form-row .form-field {
    flex: 1;
}
.form-field label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--dark-grey);
    margin-bottom: 0.4rem;
    letter-spacing: 0.3px;
}
.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.input-wrap i {
    position: absolute;
    left: 1rem;
    color: #9CA3AF;
    font-size: 1rem;
    transition: color 0.3s ease;
    pointer-events: none;
}
.input-wrap-textarea {
    align-items: flex-start;
}
.input-wrap-textarea i {
    top: 1rem;
}
.input-wrap input,
.input-wrap textarea {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.98rem;
    background-color: #F9FAFB;
    transition: all 0.3s ease;
    font-family: "Inter", sans-serif;
    color: var(--dark-grey);
    line-height: 1.5;
}
.input-wrap textarea {
    resize: vertical;
    min-height: 120px;
}
.input-wrap input::placeholder,
.input-wrap textarea::placeholder {
    color: #9CA3AF;
}
.input-wrap input:focus,
.input-wrap textarea:focus {
    outline: none;
    border-color: var(--orange);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(245, 134, 52, 0.1);
}
.input-wrap input:focus ~ i,
.input-wrap textarea:focus ~ i,
.input-wrap:focus-within i {
    color: var(--orange);
}

.contact-submit {
    background-color: var(--orange);
    color: #fff;
    border: none;
    padding: 0.95rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Inter", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin-top: 0.5rem;
    box-shadow: 0 8px 20px rgba(245, 134, 52, 0.25);
}
.contact-submit i {
    transition: transform 0.3s ease;
}
.contact-submit:hover {
    background-color: var(--dark-grey);
    color: var(--orange);
    box-shadow: 0 8px 24px rgba(26, 32, 42, 0.25);
}
.contact-submit:hover i {
    transform: translateX(4px);
}


/* ====================================== */
/* menu page */
/* ====================================== */
.menu-nav {
    background-color: #fff;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(26, 32, 42, 0.08);
    position: sticky;
    top: 0;
    z-index: 10;
}
.menu-nav-container {
    justify-content: center;
    gap: 2rem;
}
.menu-nav-container a {
    color: var(--dark-grey);
    font-size: 1.1rem;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    transition: all 0.3s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.menu-nav-container a i {
    color: var(--orange);
    transition: color 0.3s ease-in-out;
}
.menu-nav-container a:hover i {
    color: #fff;
}
.menu-nav-emoji {
    font-size: 1.2rem;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
}
.menu-nav-container a:hover {
    background-color: var(--orange);
    color: #fff;
}
.menu-section {
    padding: 5rem 0;
}
.menu-section-alt {
    background-color: #F4F4F4;
}
.menu-section-head {
    text-align: center;
    margin-bottom: 3rem;
}
.menu-section-head h2 {
    font-size: 2.4rem;
    font-weight: 600;
}
.menu-section-head h2 span {
    color: var(--orange);
}
.menu-section-head p {
    font-size: 1.05rem;
    color: #5E5858;
    margin-top: 0.5rem;
}
.menu-items {
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}
.menu-item-card {
    width: 31%;
    background-color: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 14px rgba(26, 32, 42, 0.05);
    transition: all 0.4s ease-in-out;
}
.menu-section-alt .menu-item-card {
    background-color: #fff;
}
.menu-item-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(26, 32, 42, 0.1);
}
.menu-item-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    line-height: 1;
    transition: all 0.4s ease-in-out;
}
.menu-item-img span {
    display: inline-block;
    line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
}
.menu-item-card:hover .menu-item-img {
    transform: scale(1.08) rotate(-4deg);
}
.menu-item-card:hover .menu-item-img span {
    animation: emoji-pop 0.5s ease-in-out;
}
@keyframes emoji-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.menu-icon-tea {
    background: linear-gradient(135deg, rgba(245, 134, 52, 0.15), rgba(245, 134, 52, 0.05));
    color: var(--orange);
}
.menu-icon-snack {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.04));
    color: #DC2626;
}
.menu-icon-shake {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04));
    color: #3B82F6;
}
.menu-item-content {
    flex: 1;
}
.menu-item-content h3 {
    font-size: 1.2rem;
    color: var(--dark-grey);
    margin-bottom: 0.3rem;
}
.menu-item-content p {
    font-size: 0.92rem;
    color: #5E5858;
    margin-bottom: 0.5rem;
}
.menu-item-content strong {
    font-size: 1.1rem;
    color: var(--orange);
}

/* ====================================== */
/* franchise page */
/* ====================================== */
.franchise-benefits {
    padding: 5rem 0;
    background-color: #F4F4F4;
}
.franchise-benefits h4,
.franchise-process h4 {
    font-size: 2.2rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 3rem;
}
.franchise-benefits h4 span,
.franchise-process h4 span {
    color: var(--orange);
}
.franchise-benefits-wrapper {
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.franchise-benefit-box {
    width: 23%;
    background-color: #fff;
    padding: 2.5rem 1.5rem;
    border-radius: 10px;
    text-align: center;
    transition: all 0.4s ease-in-out;
}
.franchise-benefit-box:hover {
    background-color: var(--dark-grey);
}
.franchise-benefit-box:hover h3,
.franchise-benefit-box:hover p {
    color: #fff;
}
.franchise-benefit-box i {
    font-size: 2.4rem;
    color: var(--orange);
    margin-bottom: 1rem;
    display: inline-block;
}
.franchise-benefit-box h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--dark-grey);
}
.franchise-benefit-box p {
    color: #5E5858;
    font-size: 0.95rem;
}

.franchise-process {
    padding: 5rem 0;
}
.franchise-process-wrapper {
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.franchise-step-box {
    width: 23%;
    padding: 2rem 1.5rem;
    border-radius: 10px;
    background-color: #F4F4F4;
    text-align: center;
    position: relative;
    transition: all 0.4s ease-in-out;
}
.franchise-step-box:hover {
    transform: translateY(-6px);
}
.franchise-step-box .step-num {
    font-size: 2.6rem;
    color: var(--orange);
    font-weight: 700;
    display: block;
    margin-bottom: 0.5rem;
    line-height: 1;
}
.franchise-step-box h3 {
    font-size: 1.25rem;
    color: var(--dark-grey);
    margin-bottom: 0.5rem;
}
.franchise-step-box p {
    font-size: 0.95rem;
    color: #5E5858;
}

.franchise-form-section {
    background-color: #F4F4F4;
    padding: 6rem 0;
    position: relative;
}
.franchise-form-container {
    gap: 0;
    align-items: stretch;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(26, 32, 42, 0.08);
    overflow: hidden;
}

/* left dark info panel - franchise variant */
.franchise-form-left {
    width: 42%;
    background: linear-gradient(135deg, #1A202A 0%, #2a3142 100%);
    padding: 3rem 2.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.franchise-form-left::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background-color: rgba(245, 134, 52, 0.15);
    border-radius: 50%;
}
.franchise-form-left::after {
    content: "";
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 220px;
    height: 220px;
    background-color: rgba(245, 134, 52, 0.08);
    border-radius: 50%;
}
.franchise-form-left > * {
    position: relative;
    z-index: 1;
}
.franchise-form-left h2 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #fff;
    line-height: 1.2;
}
.franchise-form-left p {
    color: #D9D9D9;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}
.franchise-form-left ul {
    margin-bottom: 2rem;
}
.franchise-form-left ul li {
    color: #D9D9D9;
    font-size: 0.98rem;
    margin: 0.6rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.franchise-form-left ul li i {
    color: var(--orange);
    font-size: 1.1rem;
    margin-right: 0;
}

/* right form panel */
.franchise-form-right {
    width: 58%;
    background-color: #fff;
    padding: 3rem 2.5rem;
}

/* select element styled like inputs */
.form-select {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.6rem;
    border: 1.5px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.98rem;
    background-color: #F9FAFB;
    transition: all 0.3s ease;
    font-family: "Inter", sans-serif;
    color: var(--dark-grey);
    line-height: 1.5;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%239CA3AF'%3E%3Cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659l4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}
.form-select:focus {
    outline: none;
    border-color: var(--orange);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(245, 134, 52, 0.1);
}
.input-wrap:focus-within .form-select ~ i,
.form-select:focus ~ i {
    color: var(--orange);
}

/* ====================================== */
/* form status banners + honeypot */
/* ====================================== */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.form-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
    border: 1px solid transparent;
    animation: banner-slide 0.4s ease-out;
}
.form-banner i { font-size: 1.4rem; flex-shrink: 0; }
.banner-success {
    background-color: #ECFDF5;
    color: #065F46;
    border-color: #A7F3D0;
}
.banner-success i { color: #10B981; }
.banner-error {
    background-color: #FEF2F2;
    color: #991B1B;
    border-color: #FECACA;
}
.banner-error i { color: #DC2626; }
@keyframes banner-slide {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ====================================== */
/* hamburger + overlay (hidden on desktop) */
/* ====================================== */
.header-toggle,
.header-close {
    display: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}
.header-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 998;
}
.header-overlay.is-open {
    display: block;
}
body.menu-open {
    overflow: hidden;
}

/* prevent images overflowing */
img {
    max-width: 100%;
    height: auto;
}

/* ====================================== */
/* TABLET / large mobile  (<= 992px) */
/* ====================================== */
@media (max-width: 992px) {
    .k-container { width: 92%; }

    /* mobile slide-in menu */
    .header-container { position: relative; }
    .header-container { align-items: center; }
    .header-left { width: auto; }
    .header-left img { width: 60px; }
    .header-toggle { display: inline-flex; margin-left: auto; }

    .header-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 340px;
        height: 100vh;
        background-color: var(--dark-grey);
        flex-direction: column;
        justify-content: flex-start;
        padding: 4rem 2rem 2rem;
        z-index: 999;
        transition: right 0.35s ease-in-out;
        overflow-y: auto;
    }
    .header-menu.is-open { right: 0; }
    .header-close {
        display: inline-flex;
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
    }
    .header-menu .menu { width: 100%; }
    .header-menu ul {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    .header-menu ul li {
        width: 100%;
        border-bottom: 1px solid rgba(245, 134, 52, 0.15);
    }
    .header-menu ul li a {
        display: block;
        padding: 0.9rem 0;
        font-size: 1.05rem;
    }

    /* home hero */
    .home-hero-container { flex-direction: column; gap: 2rem; padding: 2rem 0; }
    .home-hero-left,
    .home-hero-righ,
    .home-hero-right { width: 100%; }
    .home-hero-left h1 { font-size: 2.6rem; width: 100%; }
    .home-hero-left p { width: 100%; margin: 1.5rem 0; }
    .home-hero-left .home-hero-design1 { right: 5%; top: -2%; }
    .home-hero-left .home-hero-design2 { right: 70%; bottom: 5%; }

    /* highlights */
    .home-highlights-container { flex-direction: column; gap: 1.5rem; text-align: center; }
    .home-highlights-box:nth-child(1),
    .home-highlights-box:nth-child(2),
    .home-highlights-box:nth-child(3) { width: 100%; }
    .home-highlights h2 { font-size: 1.8rem; }

    /* home menu cards */
    .home-menu { padding: 4rem 0; margin-bottom: 3rem; }
    .home-menu h4 { font-size: 1.6rem; width: 100%; }
    .home-menu-wrapper { flex-wrap: wrap; gap: 5rem 1rem; padding: 6rem 0 3rem; }
    .home-menubox { width: 45%; }
    .home-menubox .home-menu-emoji { width: 110px; height: 110px; font-size: 3.2rem; }

    /* CTA */
    .cta-main-container { flex-direction: column; gap: 1.5rem; padding: 2rem 0; }
    .cta-left, .cta-right { width: 100%; padding: 0 1rem; justify-content: center; }
    .cta-left { flex-direction: row; align-items: center; text-align: left; }
    .cta-left img { width: 50px; flex-shrink: 0; }
    .cta-left h3 { font-size: 1.3rem; }
    .cta-right { padding-right: 0; }

    /* footer */
    .footer-main { padding: 2rem 0; }
    .footer-container { padding: 2.5rem 1.5rem; }
    .footer-top { flex-direction: column; gap: 2rem; padding-bottom: 1.5rem; }
    .footer-top-box:nth-child(1),
    .footer-top-box:nth-child(2),
    .footer-top-box:nth-child(3),
    .footer-top-box:nth-child(4) { width: 100%; }
    .footer-top-box:nth-child(1) img { width: 80px; }
    .footer-bottom { flex-direction: column; }
    .footer-bottom div { width: 100%; }
    .footer-bottom-left p,
    .footer-bottom-right p { padding: 0.5rem 0; text-align: center; }

    /* page hero */
    .page-hero { padding: 3.5rem 0; }
    .page-hero-content { width: 100%; }
    .page-hero-content h1 { font-size: 2.4rem; }
    .page-hero-content p { width: 100%; font-size: 1rem; }
    .page-hero-design1, .page-hero-design2 { display: none; }

    /* about */
    .about-story { padding: 3rem 0; }
    .about-story-container { flex-direction: column; gap: 2rem; }
    .about-story-left,
    .about-story-right { width: 100%; }
    .about-story-right h2 { font-size: 2rem; }
    .about-values { padding: 3rem 0; }
    .about-values h4 { font-size: 1.8rem; margin-bottom: 2rem; }
    .about-values-wrapper { flex-direction: column; gap: 1rem; }
    .about-values-box { width: 100%; }
    .about-mission { padding: 3rem 0; }
    .about-mission-container { flex-direction: column; gap: 1.5rem; }
    .about-mission-box { width: 100%; padding: 2rem 1.5rem; }
    .about-mission-box h3 { font-size: 1.5rem; }

    /* contact info */
    .contact-info { padding: 3rem 0; }
    .contact-info-wrapper { flex-direction: column; gap: 1rem; }
    .contact-info-box { width: 100%; }

    /* contact / franchise forms */
    .contact-form-section,
    .franchise-form-section { padding: 3rem 0; }
    .contact-form-container,
    .franchise-form-container { flex-direction: column; border-radius: 16px; }
    .contact-form-left,
    .contact-form-right,
    .franchise-form-left,
    .franchise-form-right {
        width: 100%;
        padding: 2rem 1.5rem;
    }
    .contact-form-left h2,
    .franchise-form-left h2 { font-size: 1.8rem; }
    .contact-form-row { flex-direction: column; gap: 1rem; }
    .contact-submit { width: 100%; }

    /* menu page */
    .menu-nav-container { flex-wrap: wrap; gap: 0.5rem; }
    .menu-nav-container a { font-size: 0.95rem; padding: 0.4rem 1rem; }
    .menu-section { padding: 3rem 0; }
    .menu-section-head h2 { font-size: 1.8rem; }
    .menu-items { flex-direction: column; gap: 1rem; }
    .menu-item-card { width: 100%; }

    /* franchise */
    .franchise-benefits, .franchise-process { padding: 3rem 0; }
    .franchise-benefits h4,
    .franchise-process h4 { font-size: 1.8rem; margin-bottom: 2rem; }
    .franchise-benefits-wrapper,
    .franchise-process-wrapper { flex-direction: column; gap: 1rem; }
    .franchise-benefit-box,
    .franchise-step-box { width: 100%; }
}

/* ====================================== */
/* MOBILE (<= 640px) */
/* ====================================== */
@media (max-width: 640px) {
    .k-container { width: 94%; }

    .home-hero-left h1 { font-size: 2rem; }
    .home-hero-left p { font-size: 1rem; margin: 1rem 0; }
    .home-hero-left a { font-size: 0.95rem; padding: 0.55rem 1.3rem; }
    .home-hero-left .home-hero-design1 img,
    .home-hero-left .home-hero-design2 img { width: 70%; }

    .home-highlights-box strong { font-size: 1.8rem; }
    .home-highlights-box p { font-size: 1rem; }

    .home-menu { padding: 3rem 0; }
    .home-menu h4 { font-size: 1.4rem; }
    .home-menu-wrapper { padding: 5rem 0 2rem; }
    .home-menubox { width: 100%; max-width: 280px; margin: 0 auto; }
    .home-menubox a { font-size: 1.2rem; }

    .cta-left h3 { font-size: 1.1rem; line-height: 1.4; }
    .cta-left img { width: 40px; }
    .cta-right a { font-size: 1rem; padding: 0.55rem 1.5rem; }

    .footer-main p { font-size: 1rem; }
    .footer-top-box h4 { font-size: 1.1rem; }
    .footer-bottom div p { font-size: 0.85rem; }

    .page-hero { padding: 2.5rem 0; }
    .page-hero-content h1 { font-size: 1.9rem; }
    .page-hero-content p { font-size: 0.95rem; }

    .about-story-right h2,
    .contact-form-left h2,
    .franchise-form-left h2 { font-size: 1.6rem; }

    .about-values h4,
    .franchise-benefits h4,
    .franchise-process h4 { font-size: 1.5rem; }
    .about-values-box,
    .contact-info-box,
    .franchise-benefit-box { padding: 2rem 1.2rem; }

    .menu-section-head h2 { font-size: 1.6rem; }
    .menu-section-head p { font-size: 0.95rem; }
    .menu-item-card { padding: 1.2rem; gap: 0.8rem; }
    .menu-item-img { width: 64px; height: 64px; font-size: 1.9rem; border-radius: 12px; }
    .menu-item-content h3 { font-size: 1.1rem; }
    .menu-item-content p { font-size: 0.88rem; }

    .franchise-step-box .step-num { font-size: 2.2rem; }
    .franchise-step-box h3 { font-size: 1.15rem; }

    .input-wrap input,
    .input-wrap textarea,
    .form-select { font-size: 0.95rem; padding: 0.8rem 1rem 0.8rem 2.5rem; }
    .contact-submit { padding: 0.85rem 1.5rem; font-size: 0.95rem; }

    .contact-left-quick-item i { width: 38px; height: 38px; font-size: 1rem; }
}

/* ====================================== */
/* SMALL MOBILE (<= 420px) */
/* ====================================== */
@media (max-width: 420px) {
    .home-hero-left h1 { font-size: 1.7rem; }
    .home-hero-left p { font-size: 0.9rem; }

    .page-hero-content h1 { font-size: 1.6rem; }

    .cta-left { flex-direction: column; text-align: center; }
    .cta-left img { width: 36px; }

    .menu-item-card { flex-direction: column; text-align: center; }
    .menu-item-img { width: 60px; height: 60px; }

    .header-menu { width: 88%; }
}