html {
  scroll-behavior: smooth;
}


/* Global Styles */
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            padding: 0;
            background: #f4f9f4;
            color: #333;
        }

        input,
        textarea {
            font-family: 'Poppins', sans-serif;
            outline: none;
        }

        header {
            width: 100%;
            height: 100vh;
            background-image: url('https://images.pexels.com/photos/3850674/pexels-photo-3850674.jpeg');
            background-position: left;
            background-size: cover;
        }

        section {
  scroll-margin-top: 80px; /* equal to navbar height */
}


        /* Nav Styling */
nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid #eee;
}

#logo {
  height: 45px;
  transition: 0.3s ease;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 15px;
}

.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
  color: #00c9a7;
}

/* Subscribe button */
.primary-button {
  background: #00c9a7;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

.primary-button:hover {
  background: #009f86;
}

/* User button (light mode) */
.user-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  background: #2c786c;
  color: #fff;
  border: none;
  font-weight: 500;
}

.user-button:hover {
  background: #245d52; /* darker shade for hover */
}

/* Arrow inside stays white */
.user-arrow {
  color: #fff;
  transition: transform 0.25s ease;
}
.user-arrow.rotate {
  transform: rotate(180deg);
}

/* Dropdown menu (light mode) */
.dropdown-menu {
  position: absolute;
  right: 0;
  background: #fff;
  min-width: 150px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  border-radius: 6px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.dropdown-menu a {
  display: block;
  padding: 10px 14px;
  color: #333;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background: #f4f4f4;
}

.dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 🌙 Dark Mode overrides */
body.dark-mode .user-button {
  background: #1e3c35;
  color: #e0e0e0;
}

body.dark-mode .user-button:hover {
  background: #162e28;
}

body.dark-mode .user-arrow {
  color: #e0e0e0;
}

body.dark-mode .dropdown-menu {
  background: #2a2a2a;
}

body.dark-mode .dropdown-menu a {
  color: #e0e0e0;
}

body.dark-mode .dropdown-menu a:hover {
  background: #3a3a3a;
}

/* Prevent scrollbar overlap */
.nav-links {
  padding-right: 20px; /* gives breathing room from scrollbar */
}

/* Mobile Menu */
.menu-toggle {
  display: none;
  cursor: pointer;
  font-size: 24px;
}
        .menu-item {
            color: black;
            font-weight: 600;
            font-size: 14px;
            margin-right: 24px;
            cursor: pointer;
        }

        .menu-item i {
            padding-left: 4px;
        }

        

        main {
            max-width: 1200px; /* Increased from 800px to accommodate side-by-side layout */
            margin: 30px auto;
            padding: 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        #landing-section {
            width: 100%;
            height: 100vh;
            position: relative;
        }

        #landing-section::before {
            content: "";
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
            z-index: 1;
        }

        #landing-section, header {
  position: relative;
  height: 100vh;       /* full screen height */
  overflow: hidden;    /* keep overlay from bleeding out */
}

/* Overlay fix */
#landing-section .overlay, 
header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;        /* match parent, not page */
  max-height: 100vh;   /* stops overflow on mobile */
  pointer-events: none; /* overlay doesn't block buttons */
}

        #main-text-wrapper {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        #main-text-wrapper h1,
        #main-text-wrapper p {
            width: 100%;
            max-width: 1100px;
            text-align: center;
            color: #fff;
            text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
        }

        #main-text-wrapper h1 {
            font-size: 44px;
            font-weight: 600;
            letter-spacing: 8.8px;
            line-height: 1.2;
            margin: 0;
        }

        #main-text-wrapper p {
            font-size: 14px;
            letter-spacing: 0.5px;
            font-weight: 400;
            padding-top: 32px;
        }

        /* Reminder Form Section */
        #reminder-form,
        #gamification,
        #medicine-search {
            background: #ffffffcc;
            backdrop-filter: blur(10px);
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
            animation: fadeInUp 1s ease-in-out;
        }

        #reminder-form h2 {
            font-size: 26px;
            margin-bottom: 20px;
            color: #2c786c;
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* Form Styling */
        form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* Consolidated input and button styles */
        input,
        button,
        textarea {
            padding: 14px;
            font-size: 16px;
            border-radius: 8px;
            border: 2px solid #dcdcdc;
            transition: all 0.3s ease;
        }

        input:focus,
        textarea:focus {
            border-color: #2c786c;
            outline: none;
            box-shadow: 0 0 8px rgba(44, 120, 108, 0.3);
        }

        button {
            background: linear-gradient(135deg, #2c786c, #1f5d53);
            color: #fff;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(44, 120, 108, 0.3);
        }

        /* Reminder List Section */
        #reminder-list {
            background: #f8fdf9;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            animation: fadeInUp 1.2s ease-in-out;
        }

        #reminder-list h2 {
            font-size: 24px;
            color: #2c786c;
            margin-bottom: 15px;
        }

        #reminder-list ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        #reminder-list li {
            background: #e7f5e9;
            padding: 12px 16px;
            margin: 8px 0;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            color: #1f5d53;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: transform 0.2s ease, background 0.3s ease;
        }

        #reminder-list li:hover {
            background: #d5f0d7;
            transform: translateX(5px);
        }

        /* Add subtle animation on load */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Reminder Popup */
        .reminder-popup {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            border-radius: 10px;
            padding: 12px 14px;
            background: linear-gradient(180deg, #fff, #f7fff9);
            box-shadow: 0 8px 24px rgba(20, 20, 20, 0.12);
            border: 1px solid rgba(44, 120, 108, 0.08);
            width: 360px;
            font-family: 'Poppins', sans-serif;
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 9999;
        }

        .reminder-popup .popup-left {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .reminder-popup .popup-msg {
            font-size: 14px;
            color: #222;
        }

        .reminder-popup .popup-actions {
            display: flex;
            gap: 8px;
        }

        .popup-btn {
            padding: 8px 10px;
            border-radius: 8px;
            border: none;
            font-size: 13px;
        }

        .popup-btn.popup-dismiss { background: #666; color: #fff; }
        .popup-btn.popup-snooze { background: #f0ad4e; color: #111; }

        /* Chat subscribe CTA */
        .chat-subscribe-cta {
            margin-top: 10px;
            padding: 10px;
            border-radius: 10px;
            background: linear-gradient(180deg, #fff8f0, #fff);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            border: 1px solid rgba(0, 0, 0, 0.06);
        }

        .chat-subscribe-cta .primary-button {
            background: #2c786c;
            color: white;
            padding: 8px 12px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
        }

        .chat-subscribe-cta .secondary-button {
            background: transparent;
            border: 1px solid #ccc;
            padding: 8px 12px;
            border-radius: 8px;
            cursor: pointer;
        }

        #gamification {
            margin: 40px auto;
            padding: 20px;
            max-width: 800px;
            background: #ffffffcc;
            backdrop-filter: blur(8px);
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }

        #progress-container {
            width: 100%;
            height: 25px;
            background: #e0e0e0;
            border-radius: 12px;
            margin: 15px 0;
            overflow: hidden;
        }

        #progress-bar {
            width: 0%;
            height: 100%;
            background: linear-gradient(135deg, #2c786c, #1f5d53);
            transition: width 0.5s ease-in-out;
        }

        #points {
            font-size: 20px;
            font-weight: bold;
            color: #2c786c;
        }

/* Main Container (Chat + Medicine side by side) */
        /* Main Container (Chat + Medicine side by side) */
        .bot-medicine-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 40px auto;
            max-width: 800px; /* Updated width */
            width: 100%;
            gap: 20px;
            box-sizing: border-box;
        }

        /* Each section takes full width */
        .chatbox,
        .medicine-section {
            width: 100%;
            box-sizing: border-box;
        }

        /* AI Chatbot Section */
        #chatbot-section {
            display: flex;
            flex-direction: column;
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
            padding: 20px;
            min-width: 700px;
        }

        /* Chatbox content within the section */
        #chatbox {
            flex-grow: 1;
            overflow-y: auto;
            padding: 15px;
            background: #fdfdfd;
            font-size: 15px;
            line-height: 1.6;
            color: #333;
            text-align: left;
            scroll-behavior: smooth;
            border-radius: 12px;
            border: 1px solid #e0e0e0;
            height: 250px;
            
        }

        /* Chat Input Container */
        #chat-input-container {
            display: flex;
            margin-top: 15px;
            border: 1px solid #dcdcdc;
            border-radius: 8px;
            overflow: hidden;
        }

        #chat-input {
            flex: 1;
            border: none;
            padding: 14px;
            font-size: 15px;
            outline: none;
        }

        #chat-send {
            padding: 14px 20px;
            background: #2c786c;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }

        /* Medicine Search Section */
#medicine-search {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    text-align: center;
    max-width: 700px;
    justify-content: center;
    align-items: center; /* ✅ centers content horizontally */
    margin: 0 auto;      /* ✅ centers the whole box */
}

#medicine-search h2 {
    font-size: 22px;
    margin-bottom: 20px;
    color: #2c786c;
}

#medicine-input {
    width: 650px;
    padding: 12px 14px;
    font-size: 15px;
    border: 2px solid #dcdcdc;
    border-radius: 8px;
    outline: none;
    margin-bottom: 12px;
}

#medicine-btn {
    width: 200px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #2c786c, #1f5d53);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}

        .medicine-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(44, 120, 108, 0.3);
        }

        /* Medicine Result */
/* Medicine Result */
#medicine-result {
    margin-top: 20px;
    padding: 15px;
    background: #f8fdf9;
    border-left: 4px solid #2c786c;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    text-align: left;
    animation: fadeInUp 0.6s ease-in-out;

    /* ✅ Fix centering */
    max-width: 600px;
    width: 100%;
    display: flex;
    margin-left: auto;
    margin-right: auto;
}

/* Loader */
.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2c786c;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;

    /* ✅ Always centered */
    margin: 15px auto;
    display: none;
}

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

        /* Analytics Section Styles */
        #analytics h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .chart-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 40px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .chart-wrapper {
            flex: 1;
            min-width: 300px;
            max-width: 450px;
            position: relative;
            height: 300px;
        }

        .chart-wrapper canvas {
            width: 100% !important;
            height: 100% !important;
        }

        /* Store Section Styles */
        #store-section,
        #service-section {
            width: 100%;
            background-color: #f7eee2;
            padding-top: 75px;
            padding-bottom: 75px;
            text-align: center;
        }

        #store-section > h3,
        #service-section > h3 {
            font-size: 44px;
            font-weight: 600;
            margin: 0;
            margin-bottom: 8px;
        }

        #store-heading {
            color: #91ac41;
            font-size: 24px;
            font-family: 'Caveat', cursive;
            margin: 0;
            margin-top: 35px;
        }

        #store-desc {
            font-size: 16px;
            font-weight: 500;
            margin: 0;
            color: #8b8b99;
            letter-spacing: 0.5px;
            margin-bottom: 55px;
        }

        .product-grid {
            display: flex;
            justify-content: center;
            max-width: 1140px;
            margin: 0 auto;
            flex-wrap: wrap;
            gap: 20px;
        }

        .product-card {
            width: 30%;
            min-width: 250px;
        }

        #store-section {
    text-align: center;
    margin: 40px auto;
    max-width: 900px;
  }
  .store-item-large-1 {
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 30px;
    margin: 20px 0;
    background: #f9f9f9;
    background-image: url(https://images.pexels.com/photos/3873143/pexels-photo-3873143.jpeg);
    background-size: cover;
  }
  .store-item-large-2 {
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 30px;
    margin: 20px 0;
    background: #f9f9f9;
    background-image: url(https://www.gosupps.com/media/catalog/product/6/1/614NbGGDe8L.jpg);
    background-size: cover;
  }

  .store-item-large-3 {
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 30px;
    margin: 20px 0;
    background: #f9f9f9;
    background-image: url(https://thumbs.dreamstime.com/b/lots-round-tablets-round-pills-top-view-round-white-pills-background-206950060.jpg);
    background-size: cover;
  }

  .store-item-large-1,
.store-item-large-2,
.store-item-large-3 {
  position: relative;       /* needed for overlay */
  border: 1px solid #ccc;
  border-radius: 15px;
  padding: 30px;
  margin: 20px 0;
  background-size: cover;
  background-position: center;
  color: #fff;              /* text visible on dark overlay */
  overflow: hidden;         /* clip overlay to box radius */
}

/* Add overlay */
.store-item-large-1::before,
.store-item-large-2::before,
.store-item-large-3::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);  /* dark overlay */
  border-radius: 15px;
  z-index: 0;
}

/* Make sure text + icons are above overlay */
.store-item-large-1 *,
.store-item-large-2 *,
.store-item-large-3 * {
  position: relative;
  z-index: 1;
  color: #fff !important; /* force text & icons visible */
}


  .icon-wrapper {
    margin-bottom: 15px;
  }

  .store-item-3-h3, .store-item-3-p {
    color: black;
  }
  .order-btn {
    background: #28a745;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
  }
  .order-btn:hover {
    background: #218838;
  }

        /* Subscription Section Styles */
        #subscription-section {
            background-color: #2c786c;
            color: #fff;
            text-align: center;
            padding: 60px 20px;
            font-family: 'Poppins', sans-serif;
        }

        #subscription-section h2 {
            font-size: 36px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .sub-description {
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto 20px;
            line-height: 1.5;
        }

        .price-box {
            display: inline-block;
            margin-bottom: 10px;
        }

        .price {
            font-size: 48px;
            font-weight: 800;
            vertical-align: middle;
        }

        .per-month {
            font-size: 18px;
            font-weight: 600;
            vertical-align: sub;
        }

        .trial-text {
            font-size: 14px;
            margin-bottom: 20px;
            font-style: italic;
            opacity: 0.8;

        }

        .paga-form {
    display: flex;
    display: flex;               /* Make the form a flex container */
    justify-content: center;     /* Center the button horizontally */
    align-items: center;         /* Center vertically if needed */
    margin-top: 20px;            /* Optional spacing */
    width: 100%; 
}


        .subscribe-btn {
            display: flex !important;   
            justify-content: center !important;   /* Center the content */
            align-items: center !important;       /* Center the content */
            max-width: 220px !important;            /* Limit the width */
            width: 100% !important;                 /* Fill available space up to max-width */
            text-align: center !important;          /* Center the text/icon */
            padding: 10px 20px !important;          /* Adjust button padding */
            border-radius: 8px !important;          /* Rounded corners */
    background-color: #0e8dad !important;   /* Button color */
    color: #fff !important;                 /* Text color */
    font-size: 16px !important;             /* Font size */
    cursor: pointer !important;             /* Pointer on hover */
    border: none;                /* Remove default border */
}

.subscribe-btn i {
    margin-left: 8px !important;            /* Space between text and icon */
}

        .subscribe-btn:hover {
            background-color: #f69dad !important;
            transform: translateY(-3px) !important;
        }

        /* Follow Us Section */
        #follow-section {
            display: flex;
            justify-content: stretch;
            align-items: stretch;
        }

        #left-section {
            width: 67%;
            margin: 0;
        }

        #left-section img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        #right-section {
            width: 33%;
            position: relative;
            background-image: url('https://i.pinimg.com/736x/5f/2a/27/5f2a2756630109eff806d9d0016c8753.jpg');
            background-size: cover;
            background-position: center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }

        #right-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.55);
            z-index: 1;
        }

        #right-section #text-wrapper {
            position: relative;
            z-index: 2;
            padding: 40px;
            text-align: center;
        }

        #subscribe-btn {
            background-color: #f69dad;
            padding: 16px 42px;
            border-radius: 4px;
            cursor: pointer;
            color: white;
            border: 0;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            margin-top: 16px;
            transition: 0.3s ease;
        }

        #subscribe-btn:hover {
            color: #f69dad;
            border: 1px solid #f69dad;
            background-color: transparent;
        }

        /* STATS SECTION STYLES START */
        #stats-section {
            width: 100%;
            background-color: #f6fcfa;
        }

        #stats-wrapper {
            width: 100%;
            max-width: 1140px;
            padding: 100px 0;
            margin: 0 auto;
            text-align: center;
            display: flex;
            justify-content: stretch;
        }

        .stats-item {
            width: 25%;
            padding: 0 64px;
        }

        .stats-item h3 {
            font-size: 44px;
            font-weight: 600;
            margin: 0;
        }

        .stats-item p {
            color: #57e3b5;
            font-size: 14px;
            letter-spacing: 0.5px;
            font-style: italic;
            margin: 0;
        }

        #testimonials-section {
            width: 100%;
            padding-top: 75px;
            padding-bottom: 75px;
            text-align: center;
        }

        #testimonials-section > h3 {
            font-size: 44px;
            font-weight: 600;
            margin: 0;
            margin-bottom: 8px;
        }

        #testimonials-desc {
            max-width: 700px;
            font-size: 16px;
            font-weight: 500;
            margin: 0 auto;
            color: #8b8b99;
            letter-spacing: 0.5px;
            margin-bottom: 55px;
        }

        #testimonials-wrapper {
            width: 100%;
            max-width: 1140px;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }

        .testimonial-item {
            width: 25%;
            text-align: center;
            background-color: #f5f6fb;
            padding: 40px 30px;
            margin: 16px;
            border-top-left-radius: 45px;
            border-bottom-left-radius: 45px;
            border-bottom-right-radius: 45px;
            transition: box-shadow 0.3s;
        }

        .testimonial-item:hover {
            box-shadow: 0 12px 16px 0 rgba(39, 39, 47, 0.06);
        }

        .testimonial-item img {
            width: 80px;
            margin-bottom: 25px;
            border-radius: 50%;
        }

        .testimonial-message {
            font-size: 14px;
            color: #8b8b99;
            letter-spacing: 0.5px;
            font-style: italic;
            margin: 0;
        }

        .testimonial-item h3 {
            text-transform: uppercase;
            font-size: 16px;
            font-weight: 600;
            margin-top: 24px;
            margin-bottom: 0px;
        }

        .job-role {
            color: #8b8b99;
            font-size: 12px;
            font-style: italic;
            letter-spacing: 0.5px;
            margin: 0;
        }

        /* ========== PITCH DECK SECTION ========== */
#pitch-deck {
    text-align: center;
    padding: 40px;
}

#pitch-deck h2 {
    color: #2c786c;
    font-size: 26px;
    margin-bottom: 20px;
    font-weight: 600;
}

#pitch-deck p {
    font-size: 16px;
    color: #444;
    margin-bottom: 20px;
}

#pitch-deck iframe {
  width: 100%;
  max-width: 900px;       /* keeps it centered on large screens */
  height: 600px;          /* taller so content fits */
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  display: block;
}


        /* VIDEO SECTION STYLES START */
        #video-section h3 {
            color: #8b8b99;
            font-size: 44px;
            font-weight: 400;
        }

        #video-section > div {
            width: 100%;
            max-width: 1140px;
            margin: 0 auto;
            text-align: center;
        }

        

        #video-section iframe {
            width: 100%;
            height: 425px;
        }

        

        /* ADDRESS SECTION STYLES START */
        #address-wrapper {
            width: 100%;
            max-width: 1140px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            padding: 100px 0;
        }

        #address-wrapper > div {
            width: 50%;
        }

        #address-wrapper > div:last-of-type {
            width: 40%;
        }

        .green-heading {
            color: #91ac41;
            font-size: 24px;
            font-family: 'Caveat', cursive;
            margin: 0;
            margin-top: 35px;
        }

        .section-heading {
            font-size: 44px;
            font-weight: 600;
            margin: 0;
        }

        .section-description {
            font-size: 16px;
            font-weight: 400;
            color: #8b8b99;
            letter-spacing: 0.5px;
            line-height: 2;
            margin: 0;
            text-align: center;
        }

        .address-heading {
            font-size: 24px;
            font-weight: 600;
            margin: 0;
            margin-top: 32px;
        }

        .address-lines {
            font-size: 16px;
            font-weight: 400;
            color: #8b8b99;
            letter-spacing: 0.5px;
            line-height: 2;
            margin: 0;
        }

        .contact-link {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 12px 20px;
            background: #2c786c;
            color: white;
            text-decoration: none;
            font-size: 1.1em;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .contact-link i {
            font-size: 1.4em;
        }

        .contact-link:hover {
            background: #1f5d53;
            transform: scale(1.05);
        }

        .input-box {
            width: 100%;
            padding: 16px;
            font-size: 16px;
            color: #8b8b99;
            border-radius: 6px;
            border: 1px solid #e5e6ec;
            margin-bottom: 16px;
            box-sizing: border-box;
        }

        #btn-submit {
            font-size: 16px;
        }

        /* FOOTER SECTION STYLES START */
        footer {
            background-color: #232323;
            color: white;
            font-size: 14px;
            letter-spacing: 0.5px;
            text-align: center;
            padding: 30px 0px;
        }

        /* -------- STORE SECTION FIX -------- */
#store-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Large store items */
.store-item-large-1,
.store-item-large-2,
.store-item-large-3 {
  width: 100%;
  max-width: 500px;
  margin: 15px auto;           /* centers them under main store */
  text-align: center;
  box-sizing: border-box;
}

#video-section h2.section-heading {
  text-align: center;          /* center on laptop & larger */
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 15px;
}

/* ===== DARK MODE ===== */
body.dark-mode {
  background-color: #121212;
  color: #f1f1f1;
}

/* Header, footer, sections */
body.dark-mode header,
body.dark-mode footer,
body.dark-mode section,
body.dark-mode main {
  background-color: #1c1c1c;
  color: #f1f1f1;
}

/* Navbar */
body.dark-mode nav {
  background: #1e1e1e;
  border-bottom: 1px solid #333;
}
body.dark-mode .nav-links a {
  color: #ddd;
}
body.dark-mode .nav-links a:hover,
body.dark-mode .nav-links a.active {
  color: #00c9a7;
}

/* Forms & inputs */
body.dark-mode input,
body.dark-mode textarea {
  background-color: #2b2b2b;
  color: #f1f1f1;
  border: 1px solid #444;
}
body.dark-mode input:focus,
body.dark-mode textarea:focus {
  border-color: #00c9a7;
  box-shadow: 0 0 8px rgba(0, 201, 167, 0.3);
}

/* Buttons */
body.dark-mode button,
body.dark-mode .primary-button,
body.dark-mode .subscribe-btn,
body.dark-mode .order-btn {
  background: linear-gradient(135deg, #00c9a7, #007f6e);
  color: #fff;
  border: none;
}
body.dark-mode button:hover,
body.dark-mode .order-btn:hover {
  background: linear-gradient(135deg, #00e6c2, #009f86);
}

/* Cards / boxes */
body.dark-mode .product-card,
body.dark-mode .store-item-large-1,
body.dark-mode .store-item-large-2,
body.dark-mode .store-item-large-3,
body.dark-mode #reminder-form,
body.dark-mode #gamification,
body.dark-mode #medicine-search,
body.dark-mode #reminder-list {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
  border: 1px solid #333;
}

/* Chatbox & medicine results */
body.dark-mode #chatbox,
body.dark-mode #medicine-result {
  background: #222 !important;
  border: 1px solid #444;
  color: #f1f1f1 !important;
}

/* Stats & Testimonials */
body.dark-mode #stats-section,
body.dark-mode #testimonials-section {
  background-color: #1c1c1c;
}
body.dark-mode .testimonial-item {
  background-color: #222;
  color: #ddd;
}

/* AI Bot / Chatbox */
body.dark-mode #chatbot,
body.dark-mode #chatbox {
  background-color: #1e1e1e !important;
  color: #f1f1f1 !important;
  border: 1px solid #333;
}
body.dark-mode #chatbox * {
  color: #f1f1f1 !important;
}

/* Services Section */
body.dark-mode #services-section,
body.dark-mode .service-item {
  background-color: #1c1c1c !important;
  color: #f1f1f1 !important;
}
body.dark-mode .service-item h3,
body.dark-mode .service-item p {
  color: #f1f1f1 !important;
}

/* Store Section */
body.dark-mode #store-section {
  background-color: #1c1c1c !important;
  color: #f1f1f1 !important;
}
body.dark-mode .store-item,
body.dark-mode .store-item-large-1,
body.dark-mode .store-item-large-2,
body.dark-mode .store-item-large-3 {
  background-color: #222 !important;
  border: 1px solid #333 !important;
  color: #f1f1f1 !important;
}

/* Subscription Section */
body.dark-mode #subscription-section {
  background-color: #1c1c1c !important;
  color: #f1f1f1 !important;
  background-image: none !important; /* remove bg image in dark mode */
}
body.dark-mode #subscription-section input,
body.dark-mode #subscription-section button {
  background-color: #2b2b2b !important;
  color: #f1f1f1 !important;
  border: 1px solid #444 !important;
}

/* 🌙 Global Dark Mode */
body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}

/* Landing Section Dark Mode Overlay */
body.dark-mode #landing-section {
    position: relative; /* Needed for overlay positioning */
    background: url("https://images.pexels.com/photos/3850674/pexels-photo-3850674.jpeg") center/cover no-repeat;
    color: #f1f1f1;
}

/* Dark overlay */
body.dark-mode #landing-section::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; left:0; right:0; bottom:0 */
    background: rgba(0, 0, 0, 0.6); /* Adjust opacity for darkness */
    z-index: 0;
}

/* Make all content appear above overlay */
body.dark-mode #landing-section * {
    position: relative;
    z-index: 1;
}


/* 🌙 Landing Page - remove background image on mobile dark mode */
@media (max-width: 768px) {
  body.dark-mode #landing-section {
    background: #121212 !important;


  }

  body.dark-mode #landing-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5); /* Semi-transparent black */
    pointer-events: none;
}

}

/* 🌙 Chatbot Section */
body.dark-mode #chatbot-section {
  background: #1e1e1e !important;
  color: #f0f0f0 !important;
  border-radius: 12px;
  padding: 20px;
}

body.dark-mode #chatbox {
  background: #262626 !important;
  color: #f0f0f0 !important;
  border: 1px solid #333;
}

body.dark-mode #chat-input-container {
  background: #1e1e1e;
}

body.dark-mode #chat-input {
  background: #2c2c2c;
  color: #f0f0f0;
  border: 1px solid #444;
}

/* 🌙 Services + Store Section */
body.dark-mode #store-section {
  background: #1a1a1a !important;
  color: #f0f0f0 !important;
}

body.dark-mode #store-section h3,
body.dark-mode #store-section p {
  color: #f0f0f0 !important;
}

/* 🌙 Subscription Section with Overlay */
body.dark-mode #subscription-section {
  position: relative;
  background: url("https://images.pexels.com/photos/159211/headache-pain-pills-medication-159211.jpeg") center/cover no-repeat;
  color: #f0f0f0;
}

/* FOLLOW SECTION Dark Mode Fix */
body.dark-mode #follow-section #left-section img {
  opacity: 0.15; /* Dim the image instead of showing bright */
  filter: grayscale(80%);
}




body.dark-mode #subscription-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* overlay */
  z-index: 0;
}

body.dark-mode #subscription-section * {
  position: relative;
  z-index: 1;
}

/* 🌙 Contact + Address Section */
body.dark-mode #contact,
body.dark-mode #address-section {
  background: #1a1a1a !important;
  color: #f0f0f0 !important;
}

body.dark-mode #contact a {
  color: white !important;
}

/* 🌙 Dark Mode Toggle Button (bottom-right corner) */
#dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #1a2238; /* Navy */
  color: #ffffff;
  border: none;
  border-radius: 50%;
  padding: 12px 16px;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease, transform 0.2s ease;
  z-index: 1000;
}

#dark-mode-toggle:hover {
  background-color: #0f1624; /* Darker Navy on hover */
  transform: scale(1.05);
}

/* Dark Mode for Reminder Popup */
body.dark-mode .reminder-popup {
    background: linear-gradient(180deg, #1e1e1e, #2a2a2a);
    border: 1px solid #444;
    color: #f1f1f1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

body.dark-mode .reminder-popup .popup-msg {
    color: #f1f1f1;
}

body.dark-mode .reminder-popup .popup-actions .popup-btn.popup-dismiss {
    background: #555;
    color: #fff;
}

body.dark-mode .reminder-popup .popup-actions .popup-btn.popup-snooze {
    background: #ffb74d;
    color: #111;
}


/* Fix Landing Page BG in Mobile */
@media (max-width: 768px) {
  /* Landing Section Dark Mode Overlay */
body.dark-mode #landing-section {
    position: relative; /* Needed for overlay positioning */
    background: url("https://images.pexels.com/photos/3850674/pexels-photo-3850674.jpeg") center/cover no-repeat !important;
    color: #f1f1f1;
}

/* Dark overlay */
body.dark-mode #landing-section::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; left:0; right:0; bottom:0 */
    background: rgba(0, 0, 0, 0.6); /* Adjust opacity for darkness */
    z-index: 0;
}

/* Make all content appear above overlay */
body.dark-mode #landing-section * {
    position: relative;
    z-index: 1;
}

}

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

        /* Tablet and Small Desktop Styles */
        @media (max-width: 1024px) {
            main {
                max-width: 90%;
                margin: 20px auto;
                padding: 15px;
            }

            #store-section,
            #service-section {
                padding-top: 50px;
                padding-bottom: 50px;
            }

            .product-grid {
                gap: 15px;
            }

            .product-card {
                width: 45%;
            }

            #stats-wrapper {
                padding: 60px 0;
            }
        }

        /* Mobile Styles */
        @media (max-width: 768px) {
            /* Global Mobile Resets */
            body {
                overflow-x: hidden;
                margin: 0;
                padding: 0;
            }

            main {
                max-width: 100%;
                margin: 0 auto;
                padding: 0 10px;
            }

            /* Center all major sections on mobile */
            #store-section,
            #subscription-section,
            #service-section,
            #testimonials-section,
            #follow-section,
            #stats-section,
            #video-section,
            #address-section {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
                padding: 0 15px;
                box-sizing: border-box;
            }

            /* Remove excessive space at the sides */
            #reminder-form,
            #reminder-list,
            #gamification,
            #medicine-search {
                padding: 20px;
                width: 100%;
            }

            /* Navigation Bar */
            nav {
                height: auto;
                padding: 15px;
                position: relative;
                width: 100% !important;
            }

            .menu-item {
                display: none;
            }

            .primary-button {
                margin-right: 0;
                margin-top: 10px;
            }

            /* Landing Section */
            #main-text-wrapper h1 {
                font-size: 28px;
                letter-spacing: 4px;
                padding: 0 10px;
            }

            #main-text-wrapper p {
                font-size: 12px;
                padding: 0 10px;
            }

            /* Flexbox Containers */
            #stats-wrapper,
            #address-wrapper,
            #testimonials-wrapper,
            .product-grid,
            .chart-container {
                flex-direction: column;
                gap: 20px;
                width: 100%;
                margin: 0 auto;
            }

            .bot-medicine-container {
                flex-direction: column;
                gap: 15px;
            }

            .bot-medicine-container > .chatbox,
            .bot-medicine-container > .medicine-section {
                width: 100%;
            }

            

            .get-premium-btn {
                padding: 12px 20px;
            }

            .premium-badge {
                font-size: 0.8rem;
                margin-left: 8px;
            }

            /* Chatbot Section */
  #chatbot-section {
    min-width: unset;   /* remove 700px lock */
    width: 100%;
    padding: 15px;
    
  }

  /* Chatbot fix */
#chatbox {
  width: 100%;
  max-width: 100%;
  overflow-y: auto;   /* scroll inside, not outside */
  word-wrap: break-word;
  white-space: pre-wrap;  /* ✅ prevents text from going off-screen */
  box-sizing: border-box;
  
}

#chatbot-section #chat-log {
        text-align: left !important;
    }


  /* Medicine Search */
  #medicine-input {
    width: 100%;        /* full width on mobile */
    max-width: 100%;
  }

  #medicine-search {
    max-width: 100%;
    padding: 20px;
  }

  #medicine-result {
    width: 100%;
    max-width: 100%;
  }

  /* Forms & buttons inside medicine section */
  #medicine-btn {
    width: 100%;
    max-width: 250px;   /* keep button decent size */
  }

            #chat-input {
                padding: 12px;
                font-size: 14px;
            }

            #chat-send {
                padding: 12px 18px;
                font-size: 16px;
            }

            /* Individual Items */
            .store-item,
            .stats-item,
            #left-section,
            #right-section,
            #address-wrapper > div,
            .product-card {
                width: 100%;
                padding: 0;
            }

            #address-wrapper > div:last-of-type {
                width: 100%;
            }

            #right-section {
                min-height: 400px;
            }

            #address-wrapper {
                flex-direction: column;
                padding: 20px;
                gap: 30px;
            }

            /* Video Section */
            #video-section iframe {
                height: 250px;
                width: 100%;
            }

            /* Headers */
            #store-section > h3,
            #service-section > h3,
            .section-heading,
            .stats-item h3,
            #testimonials-section > h3 {
                font-size: 32px;
            }

            .chart-wrapper {
                flex: unset;
                width: 100%;
                height: auto;
            }

            /* Store and Subscription Sections */
            #store-section,
            #service-section {
                padding: 50px 20px;
            }

            .product-grid {
                flex-direction: column;
            }

            .product-card {
                width: 100%;
                min-width: unset;
            }

            #subscription-section {
                padding: 40px 20px;
            }

            #subscription-section h2 {
                font-size: 28px;
            }

            .price {
                font-size: 40px;
            }
        
            #pitch-deck {
        padding: 20px;
    }

    #pitch-deck h2 {
        font-size: 22px;
    }

    #pitch-deck p {
        font-size: 14px;
    }

    #pitch-deck iframe {
    height: 400px;
  }

    #store-items-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .store-item-large-1,
  .store-item-large-2,
  .store-item-large-3 {
    width: 90%;               /* prevent overflow */
    margin: 10px 0;
  }

/* -------- VIDEO SECTION FIX -------- */
#video-section h2.section-heading {
  text-align: center;          /* center on laptop & larger */
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 15px;
}

  .reminder-popup {
  position: fixed;       
  bottom: 10px;
  left: 5%;
  right: 5%;
  width: 90%;            
  font-size: 13px;
  padding: 10px 12px;
  flex-direction: column; 
  gap: 10px;

  max-height: calc(100vh - 20px); /* never taller than screen */
  overflow: hidden;              /* cut off any extra */
  box-sizing: border-box;
}



        /* Very Small Mobile Styles */
        @media (max-width: 480px) {
            #main-text-wrapper h1 {
                font-size: 24px;
                letter-spacing: 2px;
            }

            .subscribe-btn,
            .primary-button {
                padding: 10px 20px;
                font-size: 12px;
            }

            #medicine-input {
                width: 70%;
            }

            #medicine-btn {
                padding: 12px;
            }

            #chatbot-section {
                padding: 15px;
                margin: 10px;
            }

            #chat-input-container {
                flex-direction: column;
            }

            #chat-input {
                width: 100%;
            }

            #chat-send {
                width: 100%;
                border-radius: 8px;
                margin-top: 10px;
            }
            #pitch-deck iframe {
    height: 300px;
  }
        }

/* ========== RESPONSIVE FIXES ========== */
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Chatbot + Medicine Search Responsive */
.bot-medicine-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

#chatbot-section, 
#medicine-search {
  flex: 1 1 48%;
  min-width: 300px;
}

/* Tablet */
@media (max-width: 900px) {
  .bot-medicine-container {
    flex-direction: column;
  }
  #chatbot-section, 
  #medicine-search {
    flex: 1 1 100%;
  }
}

/* Mobile */
@media (max-width: 600px) {
  nav {
    flex-direction: row !important;
    gap: 10px;
    align-items: center;
    width: 100%;
  }

  #main-text-wrapper h1 {
    font-size: 1.6rem;
    text-align: center;
  }

  .store-item, 
  .store-item-large-1,
  .store-item-large-2,
  .store-item-large-3 {
    width: 100%;
    margin: 10px 0;
  }

  iframe {
    max-width: 100%;
    height: auto;
  }
}
        }

/* Global Mobile Section Fix */
@media (max-width: 768px) {
  section, header, footer, main,
  #store-section, #service-section, 
  #subscription-section, #stats-section,
  #testimonials-section, #video-section,
  #address-section, #follow-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* Full height hero section */
  #landing-section, header {
    height: 100dvh;  /* ✅ modern viewport unit, fixes mobile issues */
  }
  #landing-section .overlay, 
  header .overlay {
    height: 100dvh;
  }

  /* Store cards & testimonials stack */
  .product-grid, #testimonials-wrapper, #stats-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .product-card, .testimonial-item, .stats-item {
    width: 100% !important;
    max-width: 100% !important;
  }
}