@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Malayalam:wght@400;500;600;700&display=swap');

/* Prominent Glassmorphism Dark Green Language Switcher Pill */
.language-switch {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 50px !important;
  background: var(--dark, #1F3214) !important;
  color: #ffffff !important;
  border: 1px solid var(--dark, #1F3214) !important;
  font-family: 'Noto Sans Malayalam', 'Outfit', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(31, 50, 20, 0.25) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, box-shadow 0.2s ease !important;
  will-change: transform !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  z-index: 100 !important;
}

.language-switch:hover {
  transform: translate3d(0, -2px, 0) !important;
  background: var(--black, #0a1008) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

/* HIDE ALL GOOGLE TRANSLATE BANNERS, POPUPS, WIDGETS & TOOLTIPS */
.goog-te-banner-frame,
.goog-te-banner,
.goog-te-gadget,
.goog-tooltip,
.goog-tooltip:hover,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.goog-text-highlight {
  background-color: transparent !important;
  box-shadow: none !important;
}

body {
  top: 0px !important;
  position: static !important;
}

#google_translate_element {
  display: none !important;
}

/* MALAYALAM FONT OVERRIDES & LAYOUT PROTECTION */
html[lang="ml"] body,
html.translated-ml body,
body.translated-ml,
html.malayalam,
html.malayalam body,
body.malayalam,
.translated-ml button,
.translated-ml input,
.translated-ml textarea {
  font-family: 'Noto Sans Malayalam', 'Assistant', sans-serif !important;
  line-height: 1.75 !important;
}

html[lang="ml"] h1, html.translated-ml h1, .translated-ml h1, html.malayalam h1,
html[lang="ml"] h2, html.translated-ml h2, .translated-ml h2, html.malayalam h2,
html[lang="ml"] h3, html.translated-ml h3, .translated-ml h3, html.malayalam h3,
html[lang="ml"] h4, html.translated-ml h4, .translated-ml h4, html.malayalam h4 {
  font-family: 'Noto Sans Malayalam', 'Assistant', sans-serif !important;
  letter-spacing: 0 !important;
}

/* Fix Hero Layout Proportions in Malayalam */
html.translated-ml .hero h1,
.translated-ml .hero h1 {
  font-size: 42px !important;
  line-height: 1.25 !important;
  margin-bottom: 20px !important;
}

html.translated-ml .hero p,
.translated-ml .hero p {
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

html.translated-ml section h2,
.translated-ml section h2 {
  font-size: 34px !important;
  line-height: 1.3 !important;
}

html.translated-ml section h3,
.translated-ml section h3,
html.translated-ml .plant-card h3,
.translated-ml .plant-card h3 {
  font-size: 22px !important;
  line-height: 1.35 !important;
}

/* Logo Subtitle Always Clean English */
html.translated-ml .logo-text .top,
.translated-ml .logo-text .top {
  font-family: 'Playfair Display', serif !important;
}
html.translated-ml .logo-text .bottom,
.translated-ml .logo-text .bottom {
  font-family: 'Outfit', sans-serif !important;
  letter-spacing: 0.3em !important;
}

/* Navbar Links Spacing in Malayalam */
html.translated-ml nav.primary-nav,
.translated-ml nav.primary-nav {
  gap: 22px !important;
}
html.translated-ml nav.primary-nav a,
.translated-ml nav.primary-nav a {
  font-size: 15px !important;
}

@media (max-width: 992px) {
  html.translated-ml .hero h1,
  .translated-ml .hero h1 {
    font-size: 34px !important;
  }
}

@media (max-width: 576px) {
  .language-switch {
    height: 36px !important;
    max-width: 98px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
    overflow: hidden !important;
    text-overflow: clip !important;
  }
  html.translated-ml .hero h1,
  .translated-ml .hero h1 {
    font-size: 28px !important;
  }
  html.malayalam section h2,
  html.translated-ml section h2,
  .translated-ml section h2 {
    font-size: clamp(25px, 7.5vw, 29px) !important;
    line-height: 1.35 !important;
  }
  html.malayalam section h3,
  html.translated-ml section h3,
  .translated-ml section h3 {
    font-size: 19px !important;
    line-height: 1.45 !important;
  }
  html.malayalam .btn,
  html.translated-ml .btn,
  .translated-ml .btn {
    line-height: 1.35 !important;
  }
  html.malayalam .plant-card .body h3,
  html.translated-ml .plant-card .body h3,
  .translated-ml .plant-card .body h3 {
    font-size: 18px !important;
  }
}

/* Keep the fixed header controls from competing with the logo on compact
   phones.  The logo image remains visible; the duplicate text wordmark is
   hidden only where there is not enough room for all tappable controls. */
@media (max-width: 480px) {
  .nav-row { justify-content: flex-start !important; }
  
  .header-actions { margin-left: 0 !important; }
  .nav-toggle { margin-left: auto; }
}


/* ==========================================================================
   NIRAPPEL NURSERY V3 — 100% MOBILE RESPONSIVE & ZERO-OVERFLOW GUARANTEE
   ========================================================================== */

html {
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img, video, iframe, embed, object {
  max-width: 100% !important;
}

/* Tablet & Mobile Grid Responsiveness (max-width: 992px) */
@media (max-width: 992px) {
  .plant-grid,
  .product-grid,
  .services-grid,
  .branch-grid,
  .blog-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

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

  .why-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
  
  .header-actions a[aria-label="Facebook Page"] { display: none !important; }

  .wrap {
    padding: 0 16px !important;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-bottom: 36px !important;
  }

  .collage {
    position: static !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    height: auto !important;
    margin-top: 24px !important;
  }

  .collage > div {
    position: static !important;
    width: 100% !important;
    height: 140px !important;
  }
  
  .collage > div img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .video-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .blog-article {
    padding: 20px 16px !important;
  }
}

/* Small Smartphone Viewports (max-width: 576px) */
@media (max-width: 576px) {
  .wrap {
    padding: 0 14px !important;
  }

  .page-header {
    padding: 24px 14px !important;
    margin-bottom: 24px !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-header h1 {
    font-size: clamp(22px, 5.5vw, 30px) !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }

  .page-header p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .plant-grid,
  .product-grid,
  .services-grid,
  .branch-grid,
  .gallery-grid,
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .category-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .pill {
    font-size: 12px !important;
    padding: 8px 12px !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  .search-box-wrap,
  .search-input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .plant-card .body,
  .product-card .body {
    padding: 16px !important;
  }

  .plant-card .meta,
  .product-card .meta {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .btn {
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* Extra Compact Phones (max-width: 480px) */
@media (max-width: 480px) {
  .nav-row {
    padding: 0 10px !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .logo img {
    height: 34px !important;
  }

  

  .header-actions {
    gap: 6px !important;
    margin-left: auto !important;
  }

  .round-btn {
    width: 34px !important;
    height: 34px !important;
  }

  .language-switch {
    height: 34px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 992px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 576px) {
  .category-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}


/* ==========================================================================
   HEADER CLEAR DIFFERENTIATION & LOGO OVERLAP PROTECTION
   ========================================================================== */

header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(31, 50, 20, 0.12) !important;
  box-shadow: 0 4px 20px rgba(31, 50, 20, 0.06) !important;
}

.logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}

.logo img {
  height: 44px !important;
  width: auto !important;
  flex-shrink: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

.logo-text {
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

.hero {
  padding-top: 130px !important;
  padding-bottom: 80px !important;
  position: relative !important;
}

.hero-bg-image,
.hero-overlay {
  pointer-events: none !important;
}


/* ==========================================================================
   LAPTOP TRACKPAD 2-FINGER SCROLLING UNLOCK
   ========================================================================== */

html, body {
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
}


/* ==========================================================================
   MOBILE VIEW ZERO BORDER OVERFLOW & MALAYALAM WORD-BREAK SAFEGUARDS
   Ensures no element, text, heading, or border overflows mobile screen edges
   in both English and Malayalam translation modes.
   ========================================================================== */

/* 1. Global Box Sizing & Overwrap Rules */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* 2. Malayalam Typography & Multi-line Wrapping Protection */
html[lang="ml"] body,
html.translated-ml body,
body.translated-ml,
html.malayalam body,
body.malayalam {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

html[lang="ml"] h1, html[lang="ml"] h2, html[lang="ml"] h3, html[lang="ml"] h4,
html.translated-ml h1, html.translated-ml h2, html.translated-ml h3, html.translated-ml h4,
html.malayalam h1, html.malayalam h2, html.malayalam h3, html.malayalam h4,
html.translated-ml .btn, html.malayalam .btn,
html.translated-ml .pill, html.malayalam .pill,
html.translated-ml .eyebrow, html.malayalam .eyebrow {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
}

/* 3. Strict Container Width Containment (320px - 768px Mobile Screens) */
@media (max-width: 768px) {
  .wrap,
  .hero-inner,
  .hero-content,
  .page-header,
  .search-box-wrap,
  .plant-grid,
  .product-grid,
  .category-grid,
  .services-grid,
  .branch-grid,
  .gallery-grid,
  .video-grid,
  .blog-grid,
  .footer-grid,
  .why-grid,
  .contact-grid,
  .blog-article {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .plant-card,
  .product-card,
  .service-card,
  .gallery-card,
  .video-card,
  .category-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* 4. Mobile Devices & Header Optimization (320px - 768px Viewports) */
@media (max-width: 768px) {
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .nav-row {
    padding: 8px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
  }

  .logo {
    gap: 6px !important;
  }

  .logo img {
    height: 34px !important;
    width: auto !important;
  }

  .logo-text .top {
    font-size: 15px !important;
  }

  .logo-text .bottom {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #3F7A46 !important;
    letter-spacing: 0.15em !important;
  }

  .header-actions {
    gap: 6px !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
  }

  .round-btn {
    width: 35px !important;
    height: 35px !important;
    flex-shrink: 0 !important;
    border-radius: 50px !important;
  }

  .round-btn svg {
    width: 17px !important;
    height: 17px !important;
  }

  .language-switch {
    height: 35px !important;
    max-width: 110px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    border-radius: 50px !important;
  }

  .page-header h1,
  .hero h1,
  section h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
  }

  .btn,
  .pill,
  .stock-badge,
  .category-tag {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .section {
    padding: 48px 0 !important;
  }
}

/* 5. Extra Narrow Mobile Phones (320px - 480px Viewports) */
@media (max-width: 480px) {
  .nav-row {
    padding: 6px 8px !important;
  }

  .logo-text .bottom {
    display: block !important;
    font-size: 7.5px !important;
    letter-spacing: 0.15em !important;
  }

  .header-actions {
    gap: 4px !important;
  }

  .round-btn {
    width: 33px !important;
    height: 33px !important;
  }

  .round-btn svg {
    width: 15px !important;
    height: 15px !important;
  }

  .language-switch {
    height: 33px !important;
    max-width: 95px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
    gap: 3px !important;
  }

  .logo img {
    height: 32px !important;
  }

  .nav-toggle {
    width: 33px !important;
    height: 33px !important;
  }

  .nav-toggle svg {
    width: 17px !important;
    height: 17px !important;
  }
}


/* ==========================================================================
   MOBILE HAMBURGER NAVIGATION MENU SYSTEM
   ========================================================================== */

.nav-toggle {
  display: none !important;
}

@media (max-width: 992px) {
  .nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50px !important;
    background: var(--dark, #3F7A46) !important;
    color: #ffffff !important;
    border: 1px solid var(--dark, #3F7A46) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(31, 50, 20, 0.2) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    z-index: 1002 !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }

  .nav-toggle:hover {
    transform: scale(1.05) !important;
    background: var(--black, #1E3620) !important;
  }

  .nav-toggle svg {
    width: 22px !important;
    height: 22px !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
  }

  nav.primary-nav {
    display: none !important;
  }

  nav.primary-nav.mobile-menu-open {
    display: flex !important;
    position: fixed !important;
    top: 72px !important;
    left: 12px !important;
    right: 12px !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(31, 50, 20, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 40px rgba(31, 50, 20, 0.2) !important;
    z-index: 1001 !important;
    max-height: calc(100vh - 90px) !important;
    overflow-y: auto !important;
  }

  nav.primary-nav.mobile-menu-open a {
    display: flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--black, #1E3620) !important;
    border-radius: 10px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    text-decoration: none !important;
  }

  nav.primary-nav.mobile-menu-open a:hover,
  nav.primary-nav.mobile-menu-open a.active {
    background: rgba(63, 122, 70, 0.12) !important;
    color: var(--dark, #3F7A46) !important;
  }

  nav.primary-nav.mobile-menu-open a.active::after {
    display: none !important;
  }
}


/* ==========================================================================
   UNCLUTTERED MOBILE HEADER SYSTEM
   ========================================================================== */
@media (max-width: 768px) {
  .logo {
    gap: 5px !important;
  }
  .logo img {
    height: 32px !important;
    width: auto !important;
  }
  .logo-text {
    display: flex !important;
    flex-direction: column !important;
  }
  .logo-text .top {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: var(--black, #1E3620) !important;
  }
  .logo-text .bottom {
    display: block !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #3F7A46 !important;
    letter-spacing: 0.18em !important;
    line-height: 1 !important;
    margin-top: 1px !important;
  }
  .header-actions {
    gap: 4px !important;
    margin-left: auto !important;
  }
  .header-actions a[aria-label="Facebook Page"] {
    display: none !important;
  }
  .round-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50px !important;
  }
  .round-btn svg {
    width: 15px !important;
    height: 15px !important;
  }
  .language-switch {
    height: 32px !important;
    padding: 0 7px !important;
    font-size: 10.5px !important;
    border-radius: 50px !important;
  }
}

@media (max-width: 480px) {
  .nav-row {
    padding: 6px 8px !important;
  }
  .logo-text .top {
    font-size: 12px !important;
  }
  .logo-text .bottom {
    display: block !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    color: #3F7A46 !important;
    letter-spacing: 0.16em !important;
  }
  .header-actions {
    gap: 3px !important;
  }
  .round-btn {
    width: 30px !important;
    height: 30px !important;
  }
  .language-switch {
    height: 30px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }
}