/* --- 1. Global Reset & Typography --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'ProximaNova', Arial, Helvetica, sans-serif;
}

body {
    color: #282c3f;
    background-color: #fff;
    line-height: 1.5;
}

/* --- 2. Navigation Bar (Universal) --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 50px;
    background: #fff;
    box-shadow: 0 15px 40px -20px rgba(40,44,63,.15);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-section img {
    height: 50px;
    transition: transform 0.3s ease;
}

.logo-section span {
    font-size: 14px;
    color: #686b78;
    border-bottom: 2px solid #282c3f;
    padding-bottom: 2px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-links a {
    text-decoration: none;
    color: #3d4152;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a:hover,
.nav-links a.active {
    color: #fc8019;
}
/* --- 3. Offers Page (Dineout Style) --- */
.offers-banner {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.pexels.com/photos/1581384/pexels-photo-1581384.jpeg');
    background-size: cover;
    background-position: center;
    height: 380px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 0 60px;
    color: white;
    margin: 20px 0;
}

.banner-content h1 {
    font-size: 42px;
    max-width: 500px;
    line-height: 1.1;
}

.filter-bar {
    display: flex;
    gap: 15px;
    margin: 30px 0;
    overflow-x: auto;
    padding-bottom: 10px;
}

.filter-btn {
    padding: 8px 20px;
    border: 1px solid #e9e9eb;
    border-radius: 20px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    color: #686b78;
    transition: 0.2s;
}

.filter-btn:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- Search Page Exclusive Styles --- */
.search-body {
    background-color: #fff;
}

.search-glow-container {
    position: relative;
    padding: 3px;
    border-radius: 8px;
    background: linear-gradient(90deg, #fc8019, #ffb067, #fc8019);
    background-size: 200% auto;
    animation: gradientMove 3s linear infinite;
    margin-bottom: 40px;
}

.search-container {
    background: rgb(238, 237, 237);
    margin: 0;
    border: none;
}

.search-container:focus-within {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-container input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    font-weight: 500;
    color: #282c3f;
}

/* --- Elegant Search Theme --- */
.search-page-bg {
    background: #faf8fb;
    min-height: 100vh;
}

.search-wrapper {
    max-width: 900px;
    margin: 80px auto;
    padding: 0 20px;
}

/* Magic Search Box */
.magic-search-box {
    display: flex;
    align-items: center;
    background: rgb(255, 255, 255);
    padding: 12px 25px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.magic-search-box:focus-within {
    border-color: #fc8019;
    box-shadow: 0 15px 40px rgba(252, 128, 25, 0.15);
    transform: scale(1.02);
}

.magic-search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 18px;
    padding: 10px;
    color: #282c3f;
    background: transparent;
}

.search-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    color: #686b78;
    font-size: 20px;
}

.mic-icon {
    cursor: pointer;
    transition: color 0.3s;
}

.mic-icon:hover {
    color: #fc8019;
}
/* --- Cuisine Section --- */

.section-title {
    margin: 50px 0 25px;
    font-size: 22px;
    color: #3d4152;
    letter-spacing: -0.5px;
}

.cuisine-flex {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cuisine-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    animation: slideUpFade 0.5s ease forwards;
    animation-delay: calc(var(--delay) * 0.1s);
}

.bubble-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    padding: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    margin-bottom: 12px;
}

.bubble-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cuisine-bubble:hover .bubble-img {
    transform: translateY(-8px) rotate(5deg);
    box-shadow: 0 12px 30px rgba(252, 128, 25, 0.2);
}

.cuisine-bubble span {
    font-weight: 500;
    color: #535665;
    font-size: 15px;
}

/* Entrance Animation */
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #686b78;
}

/* --- Recent Search Tags --- */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h3 {
    font-size: 20px;
    color: #3d4152;
}

.clear-all {
    color: #fc8019;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.recent-tags {
    display: flex;
    gap: 12px;
    margin-bottom: 40px;
}

.tag {
    padding: 8px 16px;
    border: 1px solid #d4d5d9;
    border-radius: 20px;
    font-size: 14px;
    color: #686b78;
    cursor: pointer;
}

.tag:hover {
    background-color: #f2f2f2;
}

/* --- Popular Cuisines Slider --- */

.cuisine-slider {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    padding: 20px 0;
}

.cuisine-slider::-webkit-scrollbar {
    display: none;
}

.cuisine-card {
    text-align: center;
    min-width: 90px;
    cursor: pointer;
    transition: transform 0.2s;
}

.cuisine-card:hover {
    transform: scale(1.1);
}

.cuisine-card img {
    width: 85px;
    height: 85px;
    object-fit: cover;
    margin-bottom: 8px;
}

.cuisine-card span {
    font-size: 14px;
    color: #686b78;
    font-weight: 500;
}
/* --- 5. Corporate & Help Layouts --- */

.help-layout {
    display: flex;
    background-color: #37718e;
    min-height: 90vh;
}

.help-sidebar {
    width: 300px;
    background: #f7f6ed;
    padding: 20px 0;
}

.help-sidebar li {
    padding: 25px 40px;
    list-style: none;
    cursor: pointer;
    font-weight: 600;
}

.active-help {
    background: #fff;
    color: #282c3f;
}

.help-content {
    flex: 1;
    background: #fff;
    padding: 50px;
}

/* --- Help Section Visibility --- */

.help-section {
    display: none;
}

.active-section {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.help-tab:hover {
    background: #e2eaf1;
    color: #fc8019;
}

/* --- Container & Welcome Section --- */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.welcome-section {
    margin: 40px 0;
}

/* --- Grid Layout --- */

.food-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* --- Card Styling --- */

.food-card {
    transition: transform 0.2s;
    cursor: pointer;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
}

.food-card:hover {
    transform: scale(0.95);
}

.food-img {
    height: 180px;
    width: 100%;
    position: relative;
}

.food-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.offer-tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 8px;
    font-weight: 800;
    font-size: 18px;
    border-radius: 4px;
}

.food-info {
    padding: 12px 0;
}

.food-info h3 {
    font-size: 18px;
    color: #282c3f;
    margin-bottom: 4px;
}

.cuisine {
    color: #686b78;
    font-size: 14px;
    margin-bottom: 8px;
}

.food-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    font-weight: 600;
    color: #3d4152;
}

.rating {
    background: #48c479;
    color: white;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 3px;
    font-weight: bold;
}

/* --- Add Button --- */

.add-btn {
    width: 100%;
    margin-top: 10px;
    background: white;
    color: #60b246;
    border: 1px solid #d4d5d9;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 3px 8px #e9e9eb;
    border-radius: 4px;
}

.add-btn:hover {
    box-shadow: 0 4px 12px #bebfc5;
}
/* --- Footer Section --- */
.footer {
    background: #02060c;
    color: #fff;
    padding: 60px 80px;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.footer h4 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #ffffff;
}

.footer ul {
    list-style: none;
}

.footer ul li {
    margin-bottom: 12px;
}

.footer ul li a {
    text-decoration: none;
    color: #a9abb2;
    font-size: 14px;
}

.footer ul li a:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid #3d4152;
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
    color: #a9abb2;
}

/* --- Responsive Styles --- */
@media (max-width: 1024px) {
    .navbar {
        padding: 15px 30px;
    }

    .nav-links {
        gap: 20px;
    }

    .footer {
        padding: 40px 40px;
    }

    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .nav-links {
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px;
    }

    .footer-container {
        grid-template-columns: 1fr;
    }

    .footer {
        padding: 30px 20px;
    }
}
/* Ensure the login starts hidden off-screen to the right */
.login-overlay {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden state */
    width: 100%;
    height: 100%;
    background: rgba(40, 44, 63, 0.6); /* Darkens the background */
    z-index: 9999; /* Higher than everything else */
    transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    justify-content: flex-end;
}

/* Class added by JS to show the sidebar */
.login-overlay.active {
    right: 0;
}

.login-sidebar {
    width: 500px;
    height: 100%;
    background: white;
    padding: 40px;
    position: relative;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}

.close-sidebar {
    background: none;
    border: none;
    font-size: 35px;
    cursor: pointer;
    color: #686b78;
}

/* Input Group Styling */
.input-container {
    position: relative;
    margin: 40px 0;
}

.input-container input {
    width: 100%;
    padding: 20px 10px 10px;
    border: 1px solid #d4d5d9;
    outline: none;
    font-size: 17px;
}

.input-container label {
    position: absolute;
    left: 10px;
    top: 15px;
    color: #93959f;
    transition: 0.2s;
    pointer-events: none;
}

/* Floating Label Animation */
.input-container input:focus ~ label,
.input-container input:not(:placeholder-shown) ~ label {
    top: 5px;
    font-size: 12px;
    color: #fc8019;
}
/* Standard Orange Text Style */
.orange-text {
    color: #fc8019; /* Official Swiggy Orange */
    font-weight: 700;
    transition: all 0.3s ease;
}

/* Mind-Blowing Gradient Version (Use for Headings/Links) */
.orange-text-gradient {
    background: linear-gradient(90deg, #fc8019, #ffab40);
   
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(252, 128, 25, 0.2));
}

/* Hover effect for Orange Links */
.orange-text:hover {
    color: #e67300;
    text-shadow: 0 0 10px rgba(252, 128, 25, 0.3);
    cursor: pointer;
}
.main-viewport {
    perspective: 1200px; /* Gives the 3D 'depth' look */
    overflow: hidden;
}

.cylinder-content {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center right; /* Makes it rotate like a door/cylinder */
}

/* Add this class via JS when clicking a link to 'slide' the page */
.slide-rotate {
    transform: rotateY(-90deg) translateZ(100px);
    opacity: 0;
}
/* This fixes the "Plain Text at bottom" issue */
.overlay {
    position: fixed; /* Fixes it to the screen, not the page bottom */
    top: 0;
    right: -100%; /* Keeps it hidden until 'active' class is added */
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Dims the rest of the site */
    z-index: 9999; /* Ensures it sits on top of everything */
    transition: 0.4s ease-in-out;
    display: flex;
    justify-content: flex-end;
}

.overlay.active {
    right: 0;
}

.login-drawer {
    width: 450px;
    height: 100%;
    background: #fff;
    padding: 40px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
}

/* Apply the orange style to the link inside the drawer */
.login-header .orange-text {
    color: #fc8019;
    cursor: pointer;
    font-weight: 600;
}

.prime-btn {
    background: #fc8019;
    color: white;
    padding: 15px;
    border: none;
    width: 100%;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
}

/* --- LOGIN SIDEBAR FIX --- */
.login-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    transition: 0.5s ease;
    display: flex;
    justify-content: flex-end;
}

.login-overlay.active { right: 0; }

.login-sidebar {
    width: 450px;
    background: white;
    height: 100%;
    padding: 40px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
}
/* --- THE TURNING GLOBE PHYSICS --- */
/* --- 1. GLOBE PHYSICS --- */
.globe-stage {
    perspective: 2500px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #f8f9fb;
}

.globe-rotator {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    /* This creates the 'Round' pivot point behind the screen */
    transform-origin: center center -1000px;
    transition: transform 1.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s;
    opacity: 1;
}

/* Rotation Effect */
.turn-globe {
    transform: rotateY(-90deg) scale(0.8);
    opacity: 0;
}

/* --- 2. ORANGE TEXT STYLES --- */
.orange-text {
    color: #fc8019 !important;
    font-weight: 800;
}

.shimmer-text {
    background: linear-gradient(90deg, #282c3f, #fc8019, #282c3f);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
}

@keyframes shine { to { background-position: 200% center; } }

/* --- 3. LOGIN DRAWER FIX --- */
.login-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background: rgba(40, 44, 63, 0.5);
    z-index: 9999;
    transition: 0.5s ease-in-out;
    display: flex;
    justify-content: flex-end;
}

.login-overlay.active { right: 0; }

.login-sidebar {
    width: 450px;
    height: 100%;
    background: white;
    padding: 40px;
    box-shadow: -10px 0 50px rgba(0,0,0,0.1);
}

.prime-btn {
    background: #fc8019;
    color: white;
    border: none;
    padding: 15px;
    width: 100%;
    font-weight: 700;
    margin-top: 20px;
    cursor: pointer;
}

/* --- 4. NAVIGATION VISIBILITY --- */
.nav-links a {
    color: #282c3f !important; /* Bold black/charcoal */
    font-weight: 700;
    text-decoration: none;
}

.signin-pill {
    background: #fc8019;
    color: white !important;
    padding: 8px 20px;
    border-radius: 20px;
}
/* --- GLASSMORPHISM CARDS --- */
.glass-card {
    background: rgba(255, 255, 255, 0.4); /* Frosted effect */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    transition: transform 0.4s ease;
}

.glass-card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.5);
}

/* --- CORPORATE LAYOUT --- */
.corporate-hero {
    text-align: center;
    margin-top: 50px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 40px 0;
}

.benefit-card {
    text-align: center;
}

.benefit-card .icon {
    font-size: 40px;
    margin-bottom: 15px;
}

/* --- GLOSSY FORM INPUTS --- */
.corporate-form input, 
.corporate-form select {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.1);
    background: rgba(255,255,255,0.8);
    font-size: 16px;
    outline: none;
}

.corporate-form input:focus {
    border-color: #fc8019;
    box-shadow: 0 0 10px rgba(252, 128, 25, 0.2);
}

.input-group {
    display: flex;
    gap: 15px;
}

/* --- ORANGE GRADIENT TEXT --- */
.orange-gradient-text {
    background: linear-gradient(135deg, #fc8019 0%, #ffab40 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3rem;
    font-weight: 800;
}
/* --- GLOBE STAGE FIX --- */
.globe-stage {
    perspective: 2000px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none; /* Allows clicking through the "glass" stage */
}

.globe-rotator {
    width: 100%;
    height: 100vh;
    overflow-y: auto; /* ENABLES SCROLLING */
    overflow-x: hidden;
    pointer-events: all; /* RE-ENABLES clicking for buttons/inputs */
    transform-style: preserve-3d;
    transform-origin: center center -1000px;
    transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.8s;
}

.turn-globe {
    transform: rotateY(-90deg);
    opacity: 0;
}

/* --- GLASS STYLE FOR CORPORATE --- */
.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 25px;
    padding: 35px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    margin-bottom: 25px;
}

.corporate-hero { margin-top: 120px; text-align: center; }

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 40px 0;
}

/* --- FORM FIX --- */
.corporate-form input, .corporate-form select {
    width: 100%;
    padding: 16px;
    margin: 10px 0;
    border-radius: 12px;
    border: 1px solid #ddd;
    background: white;
    font-size: 16px;
    z-index: 10;
}

.input-group { display: flex; gap: 15px; }

/* --- ORANGE TEXT STYLE --- */
.orange-gradient-text {
    background: linear-gradient(90deg, #fc8019, #ffab40);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    font-size: 2.5rem;
}

/* Hide scrollbar but keep functionality */
.globe-rotator::-webkit-scrollbar { width: 0; }
/* --- 1. THE DYNAMIC GLOSSY BACKGROUND --- */
/* --- 1. THE VIBRANT MESH BACKGROUND --- */
.premium-home-bg {
    background-color: #ffffff;
    /* Create a soft, expensive-looking gradient floor */
    background-image: 
        radial-gradient(at 0% 0%, rgba(252, 128, 25, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 171, 64, 0.15) 0px, transparent 50%);
    overflow-x: hidden;
    min-height: 100vh;
}

/* Floating Glossy Orbs */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Keeps them behind everything */
    filter: blur(100px);
}

.blob {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    opacity: 0.5;
    animation: float 20s infinite alternate;
}

.blob-1 { background: #fc8019; top: -100px; left: -100px; }
.blob-2 { background: #ffab40; bottom: -100px; right: -100px; animation-delay: -5s; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 100px) scale(1.2); }
}

/* --- 2. THE PREMIUM GLASS FINISH --- */
.glass-card {
    /* Semi-transparent white + blur = Frosted Glass */
    background: rgba(255, 255, 255, 0.45); 
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    
    /* The rim light - makes the edge look like real glass */
    border: 1px solid rgba(255, 255, 255, 0.6);
    
    border-radius: 30px;
    padding: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(255, 255, 255, 1);
    transform: translateY(-8px);
    box-shadow: 0 35px 60px -15px rgba(252, 128, 25, 0.2);
}

/* --- 3. THE GLOSSY HEADER --- */
.glass-nav {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: sticky;
    top: 0;
    z-index: 1000;
}
/* --- 1. MOUSE-FOLLOWING GLOW --- */
/* This adds a subtle glow that follows the card, making it feel interactive */
.food-card {
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.food-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(252, 128, 25, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

.food-card:hover::before {
    opacity: 1;
}

/* --- 2. FLOATING 3D EFFECT --- */
/* Makes the food images "pop" out of the card slightly when hovered */
.food-img img {
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.food-card:hover .food-img img {
    transform: scale(1.1) translateY(-10px) rotate(2deg);
}

/* --- 3. THE "CRYSTALLIZE" ENTRANCE --- */
/* An upgraded entrance animation that looks like the page is forming from glass */
@keyframes crystallize {
    0% {
        opacity: 0;
        filter: blur(20px) brightness(1.5);
        transform: scale(0.9) translateY(30px);
    }
    100% {
        opacity: 1;
        filter: blur(0) brightness(1);
        transform: scale(1) translateY(0);
    }
}

.reveal-crystallize.visible {
    animation: crystallize 1.2s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 4. SHIMMERING LOGO --- */
.shimmer-text {
    background: linear-gradient(
        to right, 
        #282c3f 20%, 
        #fc8019 40%, 
        #fc8019 60%, 
        #282c3f 80%
    );
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}
.floating-props {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.prop {
    position: absolute;
    font-size: 40px;
    opacity: 0.2;
    filter: blur(2px);
    animation: floatProps 10s infinite ease-in-out alternate;
}

.prop-1 { top: 20%; left: 5%; animation-delay: 0s; }
.prop-2 { bottom: 15%; right: 10%; animation-delay: -3s; }
.prop-3 { top: 50%; right: 5%; animation-delay: -6s; }

@keyframes floatProps {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(-50px) rotate(20deg); }
}
/* --- OFFERS PAGE SPECIFIC STYLE --- */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.offer-banner {
    background: linear-gradient(135deg, rgba(252, 128, 25, 0.1), rgba(255, 255, 255, 0.4));
    text-align: center;
    padding: 60px 20px;
    border: 2px dashed rgba(252, 128, 25, 0.3); /* Premium voucher look */
}

.offer-banner h2 {
    font-size: 3.5rem;
    color: #fc8019;
    margin-bottom: 10px;
}

.promo-code {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background: #282c3f;
    color: white;
    border-radius: 50px;
    font-weight: bold;
    letter-spacing: 1px;
}
/* --- DINEOUT OFFER STYLE --- */
.offer-header h2 {
    font-size: 1.8rem;
    margin: 40px 0 20px;
    font-weight: 700;
    color: #333;
}

.dineout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.dineout-card {
    padding: 0 !important; /* Overriding default glass padding */
    overflow: hidden;
    background: white !important; /* Dineout cards are clean white */
    border: 1px solid #eee !important;
}

.rest-img {
    height: 180px;
    position: relative;
}

.rest-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rest-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.rest-overlay h3 { font-size: 1.1rem; }
.badge { background: #48bb78; padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }

.rest-info { padding: 15px; }
.rest-info .type { color: #777; font-size: 0.9rem; }
.rest-info .loc { color: #999; font-size: 0.85rem; margin-top: 5px; }
.table-tag { font-size: 0.8rem; color: #666; border: 1px solid #ddd; display: inline-block; padding: 2px 8px; border-radius: 4px; margin-top: 10px; }

.offer-footer { padding: 0 15px 15px; }
.main-offer { 
    background: #2f855a; 
    color: white; 
    padding: 8px; 
    border-radius: 6px; 
    font-size: 0.85rem; 
    font-weight: 600;
    text-align: center;
}
.main-offer.green-bg { background: #38a169; }

.sub-offer {
    background: #f0fff4;
    color: #2f855a;
    padding: 6px;
    border-radius: 6px;
    font-size: 0.8rem;
    margin-top: 8px;
    text-align: center;
}
/* --- Corporate Same-Page Logic --- */
.corp-section {
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.5s ease;
}

.corp-section.active-section {
    display: block; /* Show only the active one */
    opacity: 1;
}

.nav-btn {
    background: none;
    border: none;
    color: #686b78;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    padding: 10px 15px;
    transition: color 0.3s ease;
}

.nav-btn.active {
    color: #fc8019; /* Swiggy Orange for active tab */
    border-bottom: 2px solid #fc8019;
}

.business-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.section-title {
    margin-top: 50px;
    font-size: 2rem;
    color: #333;
}
/* About Page Specifics */
.about-hero {
    text-align: center;
    margin-top: 60px;
}

.about-heading {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.about-subtext {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.2rem;
    color: #686b78;
    line-height: 1.6;
}

/* Services Stage (The Map Area) */
.services-stage {
    position: relative;
    height: 500px;
    margin-top: 50px;
    background: url('f1.jpg'); /* Map-like texture */
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: cover ;
}

.center-swiggy-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    z-index: 10;
}

.service-item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.icon-circle {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 2px solid #fff;
}

.icon-circle img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* MOUSE EVENT: ZOOM ON HOVER */
.zoom-hover:hover {
    transform: scale(1.2) translateY(-10px);
    box-shadow: 0 20px 40px rgba(252, 128, 25, 0.2);
    border-color: #fc8019;
}

.service-item span {
    font-weight: 700;
    color: #282c3f;
    font-size: 1.1rem;
}

/* POP-UP ANIMATIONS */
@keyframes popIn {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.pop-up {
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

/* STAGGERED DELAYS (One after the other) */
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
/* --- OUR BUSINESSES GRID --- */
.biz-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
    padding-bottom: 50px;
}

.biz-card-vertical {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border-radius: 30px;
    padding: 40px 25px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.biz-card-vertical:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
}

/* IMAGE ZOOM EFFECT ON MOUSE POINT */
.biz-image-wrapper {
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
    border-radius: 20px;
    overflow: hidden; /* Clips the zoom */
}

.zoom-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Triggers when mouse points/hovers on the card */
.biz-card-vertical:hover .zoom-img {
    transform: scale(1.3); /* The zoom effect */
}

.biz-content h3 {
    font-size: 1.8rem;
    color: #282c3f;
    margin-bottom: 20px;
    font-weight: 800;
}

.biz-content p {
    font-size: 0.95rem;
    color: #786e68;
    line-height: 1.6;
}

/* STAGGERED POP REVEAL */
@keyframes cardPop {
    from { opacity: 0; transform: translateY(50px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal-pop {
    animation: cardPop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
/* --- DELIVERING FOR EVERYONE SECTION --- */
.sub-heading-text {
    text-align: center;
    color: #686b78;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.everyone-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 40px;
    padding: 20px;
}

.everyone-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(49, 49, 48, 0.03);
    border: 1px solid #f0f0f0;
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-media {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible; /* Allows the zoom to "pop out" of the box boundaries */
}

.card-media img {
    width: 90%;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* MOUSE EVENT: ZOOM ON POINTER */
.everyone-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.everyone-card:hover .hover-zoom {
    transform: scale(1.5); /* Strong zoom effect */
}

/* Featured center card styling (Ride with Swiggy) */
.featured-card {
    border: 1px solid rgba(252, 128, 25, 0.2);
    box-shadow: 0 10px 30px rgba(252, 128, 25, 0.1);
}

.card-label {
    margin-top: 15px;
    font-weight: 700;
    color: #282c3f;
    font-size: 1rem;
}
/* --- CONTACT US LAYOUT --- */
.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    margin-top: 50px;
    padding-bottom: 80px;
}

.contact-info-side { flex: 1; }
.contact-form-side { flex: 1; position: relative; }

.contact-main-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: #282c3f;
    margin-bottom: 10px;
}

.contact-email { font-size: 1.3rem; margin-bottom: 40px; }

.social-icons {
    display: flex;
    gap: 15px;
    margin: 15px 0 40px;
}

.soc-icon {
    width: 40px;
    height: 40px;
    background: #fc8019;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
}

.office-details h3 { font-size: 1.5rem; margin-bottom: 15px; }
.office-details p { color: #686b78; line-height: 1.6; margin-bottom: 10px; max-width: 450px; }

.get-directions-btn {
    background: #fc8019;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 10px;
    font-weight: bold;
    margin-top: 20px;
    cursor: pointer;
}

/* THE GLASS FORM */
.glass-form-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    padding: 40px;
    border: 1px solid white;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
}

.glass-form-card h2 { margin-bottom: 25px; }

.input-group { margin-bottom: 15px; }

.input-group input, .input-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: white;
    font-size: 1rem;
    outline: none;
}

.submit-orange-btn {
    width: 120px;
    background: #fc8019;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

/* DECORATIVE MOUSE ZOOM IMAGES */
.decor-sandwich {
    position: absolute;
    top: -40px;
    right: -60px;
    width: 120px;
    z-index: 10;
}

.decor-salad {
    position: absolute;
    bottom: -40px;
    left: -60px;
    width: 130px;
    z-index: 10;
}

.form-disclaimer {
    margin-top: 20px;
    font-size: 0.8rem;
    color: #999;
}

.form-disclaimer span { color: #fc8019; cursor: pointer; }
/* Zoom effect when mouse points at an image */
.zoom-hover {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.zoom-hover:hover {
    transform: scale(1.5); /* Point and zoom */
}

.zoom-img-fixed {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 15px;
    transition: transform 0.5s ease;
}
.biz-card-vertical:hover .zoom-img-fixed {
    transform: scale(1.1); /* Zoom on hover */
}
/* 1. This container acts as a 'window' - it prevents the image from leaking out */
.card-media {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* CRITICAL: This stops the giant overlapping zoom */
    border-radius: 15px;
    position: relative;
    background: #f9f9f9; /* Subtle background to match images */
}

/* 2. The image inside the card */
.hover-zoom {
    width: 80%; /* Keeps the image at a professional size */
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); /* Smooth movement */
    object-fit: contain;
}

/* 3. The Mouse Event: Subtle Zoom */
/* This makes the image grow ONLY slightly when you point at the card */
.everyone-card:hover .hover-zoom {
    transform: scale(2); /* Changed from 1.25 to 1.1 for a realistic look */
}

/* 4. Optional: Add a slight lift to the whole card */
.everyone-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #fc8019; /* Highlights the border in Swiggy Orange */
}
/* --- TALL RECTANGLE CARDS --- */
.everyone-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 0;
}

.everyone-card {
    /* Adjust these two values to control the 'Long Rectangle' shape */
    width: 220px;          /* Width of the box */
    height: 300px;         /* Increased height to make it 'Long' */
    
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Keeps image at top and label at bottom */
    padding: 30px 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;      /* Keeps the zoom effect inside the rectangle */
}

/* Featured card (like Ride with Swiggy) might be slightly taller or highlighted */
.featured-card {
    border: 2px solid #fc8019;
    box-shadow: 0 15px 40px rgba(252, 128, 25, 0.15);
}

.card-media {
    width: 100%;
    height: 70%;           /* The image area takes up the top 70% of the long box */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hover-zoom {
    width: 140px;          /* Keeps image size consistent */
    height: auto;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Label at the bottom of the rectangle */
.card-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #282c3f;
    margin-top: auto;      /* Pushes text to the very bottom */
    padding-bottom: 10px;
}

/* --- THE CONTROLLED ZOOM --- */
.everyone-card:hover .hover-zoom {
    transform: scale(1.5); /* Controlled zoom so it doesn't look giant */
}

.everyone-card:hover {
    transform: translateY(-10px); /* Card lifts up when pointing at it */
}
/* Contact Section Layout */
.contact-container {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    padding: 40px;
}

.contact-info-side { flex: 1; text-align: left; }

/* The Form Card: Rectangle Long */
.glass-form-card {
    background: rgba(255, 255, 255, 0.9);
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.938);
    width: 450px; /* Long rectangle width */
    min-height: 550px; /* Long rectangle height */
    position: relative;
    z-index: 2;
}

.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    background: #fdfdfd;
}

/* Swiggy Orange Button */
.prime-btn-orange {
    width: 100%;
    padding: 18px;
    background: #fc8019;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.prime-btn-orange:hover {
    background: #e67216;
    transform: scale(1.02);
}

/* Floating Food adjustments */
.floating-food {
    position: absolute;
    width: 120px;
    z-index: 1;
}
.sandwich { top: -20px; right: -40px; }
.salad { bottom: -30px; left: -50px; }
/* Layout for Social Icons next to Office Info */
.social-and-address-flex {
    display: flex;
    gap: 30px; /* Space between icons and text */
    margin-top: 30px;
    align-items: flex-start;
}

/* Vertical Social Bar (Ref: image_e70de5.png) */
.social-vertical-bar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.find-us-text {
    font-weight: 800;
    color: #282c3f;
    font-size: 1.2rem;
    margin-bottom: 5px;
    white-space: nowrap;
}

.icon-circle-bg {
    width: 45px;
    height: 45px;
    background-color: #fc8019; /* Swiggy Orange */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.icon-circle-bg:hover {
    transform: scale(1.1);
    background-color: #e67216;
}

/* Office Details Styling */
.office-details-box {
    text-align: left;
    max-width: 400px;
}

.office-header {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.address-text, .cin-text {
    color: #686b78;
    line-height: 1.5;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.orange-btn-outline {
    background: transparent;
    border: 2px solid #fc8019;
    color: #fc8019;
    padding: 10px 25px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}
/* Container for text and icons together */
.social-wrapper {
    margin: 25px 0;
    text-align: left;
}

.find-us-text {
    font-weight: 800;
    color: #282c3f;
    font-size: 1.2rem;
    margin-bottom: 15px; /* Space between text and icons */
}

/* THE FIX: Row alignment */
.social-horizontal-row {
    display: flex;       /* This makes them go next to each other */
    flex-direction: row; /* Horizontal alignment */
    gap: 15px;           /* Space between the circles */
}

.icon-circle-bg {
    width: 40px;
    height: 40px;
    background-color: #fc8019; /* Swiggy Orange */
    color: white;
    border-radius: 8px; /* Slightly rounded corners like image_e6bb69.png */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.icon-circle-bg:hover {
    transform: scale(1.1);
    background-color: #e67216;
}

/* Ensure office info stays below the icons */
.office-details-box {
    margin-top: 30px;
    text-align: left;
}
/* Layout to keep social boxes horizontal */
.social-horizontal-row {
    display: flex;         /* Makes items sit next to each other */
    flex-direction: row;   /* Horizontal alignment */
    gap: 12px;             /* Exact spacing between boxes */
    margin-bottom: 25px;
}

/* The Orange Square Boxes from your screenshot */
.icon-box {
    width: 42px;
    height: 42px;
    background-color: #fc8019; /* Swiggy Orange */
    color: white;
    border-radius: 6px;        /* Rounded corners as seen in your image */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.icon-box:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
    background-color: #e67216;
}

/* Positioning for the rest of the text */
.find-us-text {
    font-weight: bold;
    color: #282c3f;
    margin-bottom: 12px;
}

.office-header {
    font-size: 1.2rem;
    font-weight: 800;
    color: #282c3f;
    margin-bottom: 5px;
}

.get-directions-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}
/* --- 1. GLOBAL PREMIUM & GLASS BASE --- */
:root {
    --swiggy-orange: #fc8019;
    --glass-white: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.4);
    --text-dark: #282c3f;
    --text-gray: #686b78;
}

body {
    margin: 0;
    font-family: 'Basis Grotesque Pro', Arial, sans-serif;
    background: #f8f9fb;
    /* Soft mesh gradient background */
    background-image: 
        radial-gradient(at 0% 0%, rgba(252, 128, 25, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(108, 92, 231, 0.05) 0px, transparent 50%);
    color: var(--text-dark);
}

.glass-container {
    background: var(--glass-white);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

/* --- 2. ABOUT US: CENTERED & GLOWING --- */
.about-section {
    text-align: center;
    padding: 80px 20px;
}

.about-heading {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 20px;
}

.about-subtext {
    max-width: 700px;
    margin: 0 auto 50px;
    color: var(--text-gray);
    font-size: 18px;
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.service-item {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
}

.service-item:hover {
    transform: translateY(-10px);
}

.icon-circle {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

/* --- 3. OUR BUSINESSES & EVERYONE: RECTANGLE CARDS --- */
.card-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 50px;
}

.rectangle-card {
    width: 240px;
    height: 380px; /* Long rectangle */
    background: white;
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    transition: all 0.4s ease;
    overflow: hidden; /* Keeps zoom inside the rectangle */
}

.rectangle-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.card-img {
    width: 140px; /* Consistent image size */
    transition: transform 0.5s ease;
}

.rectangle-card:hover .card-img {
    transform: scale(1.15); /* Controlled point-and-zoom */
}

/* --- 4. HELP & CONTACT: GLASSY SIDEBAR --- */
.help-container {
    display: flex;
    max-width: 1100px;
    margin: 40px auto;
}

.help-sidebar {
    width: 280px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 20px 0 0 20px;
    border-right: 1px solid rgba(0,0,0,0.05);
}

.help-nav-item {
    padding: 22px 30px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: 0.3s;
}

.help-nav-item.active {
    background: white;
    color: var(--swiggy-orange);
    border-left: 5px solid var(--text-dark); /* Dark bar from image_e79cc5.png */
}

/* Glassy Contact Form */
.glass-form {
    padding: 40px;
    width: 450px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border-radius: 25px;
}

.social-icon-box {
    display: inline-flex;
    width: 40px;
    height: 40px;
    background: var(--swiggy-orange);
    color: white;
    border-radius: 8px; /* Square with rounded corners from image_e7280a.png */
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.submit-btn {
    background: var(--swiggy-orange);
    color: white;
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(252, 128, 25, 0.3);
}
/* Container for the whole section */
/* Container for the whole section */
.about-map-container {
    position: relative;
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 60px 20px;
}

/* Map Background Styling */
.map-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.map-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the map covers the whole area */
    filter: brightness(0.9) contrast(1.1); /* Slightly darkens to pop the glass card */
}

/* Glass Card Overlay */
.about-content-glass {
    position: relative;
    z-index: 2;
    background: rgba(255, 255, 255, 0.4); /* High transparency */
    backdrop-filter: blur(12px); /* Glass blur effect */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 50px;
    max-width: 900px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.about-title {
    font-size: 3rem;
    font-weight: 900;
    color: #282c3f;
    margin-bottom: 15px;
}

.about-description {
    font-size: 1.1rem;
    color: #3d4152;
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Icon Alignment (Ref: image_e7fabe.jpg) */
.about-services-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.service-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.node-icon-bg {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.node-icon-bg:hover {
    transform: translateY(-5px) scale(1.1);
}

.swiggy-orange-bg {
    background: #fc8019; /* Swiggy Orange */
    width: 90px;
    height: 90px;
}

.service-node span {
    font-weight: 700;
    color: #282c3f;
    font-size: 0.9rem;
}
.premium-glass-card {
    /* GLASS EFFECT */
    background: rgba(255, 255, 255, 0.45); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* MODEST BORDER */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    
    /* ORANGE GRADIENT SHADOW */
    /* Layer 1: Subtle dark base shadow */
    /* Layer 2: Main orange glow */
    /* Layer 3: Soft secondary red-orange spread */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.05), 
        0 15px 45px -10px rgba(252, 128, 25, 0.25), 
        0 20px 60px -15px rgba(255, 71, 87, 0.15);
        
    padding: 40px;
    transition: all 0.4s ease;
}

.premium-glass-card:hover {
    transform: translateY(-5px);
    /* Intensify the orange glow on hover */
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.08), 
        0 20px 55px -10px rgba(252, 128, 25, 0.4), 
        0 25px 70px -15px rgba(255, 71, 87, 0.25);
    border-color: rgba(252, 128, 25, 0.5);
}
/* Exact Button Styling */
        .city-btn {
            border: 1px solid #e2e2e7;
            border-radius: 12px;
            padding: 16px 12px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: rgba(2, 6, 12, 0.75);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.4;
            min-height: 55px;
        }

        .city-btn:hover {
            background-color: #f2f2f3;
            border-color: #d1d1d6;
        }

        /* "Show More" Orange Accent */
        .show-more {
            color: #fc8019 !important; /* Swiggy Orange */
            font-weight: 800 !important;
        }

        /* Responsive adjustment for mobile */
        @media (max-width: 900px) {
            div[style*="grid-template-columns"] {
                grid-template-columns: repeat(2, 1fr) !important;
            }
        }
        /* FOOTER STYLING */
.swiggy-footer-main {
    background-color: #f0f0f5; /* The exact light-grey shade */
    padding: 60px 0 40px;
    font-family: 'Basis Grotesque Pro', sans-serif;
    color: rgba(2, 6, 12, 0.75);
}

.footer-top-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
    gap: 20px;
    padding-bottom: 60px;
    border-bottom: 2px solid #e2e2e7;
}

.footer-col h4 {
    color: #02060c;
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
    font-size: 15px;
    cursor: pointer;
}

.footer-col ul li:hover {
    color: #02060c;
    font-weight: 600;
}

/* Brand Area */
.f-logo-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.f-logo-img { width: 32px; }
.f-logo-text { font-size: 24px; font-weight: 900; color: #fc8019; }
.copyright { font-size: 14px; color: #686b78; }

/* City Selector & Socials */
.city-selector {
    border: 1px solid #d1d1d6;
    padding: 8px 15px;
    border-radius: 8px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 15px;
}

.social-links-row {
    display: flex;
    gap: 20px;
    font-size: 20px;
}

/* Bottom Experience Bar */
.footer-bottom-bar {
    max-width: 1200px;
    margin: 40px auto 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-bar p {
    font-size: 22px;
    font-weight: 800;
    color: #3d4152;
}

.app-store-btns img {
    height: 50px;
    margin-left: 15px;
    cursor: pointer;

}
/* 1. Full-width background wrapper */
.footer-app-bar-full {
    width: 100%;
    background-color: #f0f0f5; /* Matches the grey footer */
    border-top: 1px solid #e2e2e7; /* Optional line seen in some versions */
    padding: 20px 0;
    margin: 0;
}

/* 2. Centered content container */
.footer-app-bar-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
}

/* 3. Typography */
.app-bar-text {
    font-size: 22px;
    font-weight: 800;
    color: #3d4152;
    margin: 0;
}

/* 4. Button alignment and sizing */
.app-store-btns {
    display: flex;
    gap: 15px;
}

.zoom-hover-avif {
    height: 55px; /* Standard height for these buttons */
    width: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.zoom-hover-avif:hover {
    transform: scale(1.05);
}

/* Responsive fix for mobile */
@media (max-width: 768px) {
    .footer-app-bar-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}
/* FORCE REMOVAL OF ALL SIDE GAPS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents side-to-side shaking */
}
/* CAREERS SECTION STYLES */
.careers-wrapper {
    max-width: 1100px;
    margin: 80px auto;
    padding: 0 20px;
}

.careers-title {
    text-align: center;
    font-size: 32px;
    font-weight: 900;
    color: #3d4152;
    margin-bottom: 40px;
}

.careers-layout {
    display: flex;
    gap: 50px;
    align-items: center;
}

.careers-text-side { flex: 1; }
.careers-text-side p {
    color: #686b78;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 16px;
}

.know-more-btn {
    background-color: #fc8019; /* Swiggy Orange */
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.rounded-team-img {
    width: 100%;
    max-width: 500px;
    border-radius: 60px; /* High curvature from image */
    display: block;
}

/* MANAGEMENT GRID STYLES */
.management-wrapper {
    max-width: 1100px;
    margin: 100px auto;
    padding: 0 20px;
}

.management-title { font-size: 28px; font-weight: 800; margin-bottom: 40px; }

.team-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 Photos in a row */
    gap: 20px;
}

.member-card { text-align: center; }
.member-card img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 15px;
}

/* ORANGE SHOW MORE */
.show-more-box { text-align: center; margin-top: 40px; }
.show-more-btn {
    background: white;
    border: 1px solid #e2e2e7;
    color: #fc8019; /* Orange text */
    padding: 15px 40px;
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
}