/* Base + sample theme adapted from your CSS */
:root{
  --orange:#E57F19;
  --orange-dark:#cf6f15;
  --bg:#f8f9fa;
  --muted:#555;
  --dark:#333;
  --cream:#FFF8E1;
}

:lang(ml) {
  font-family: "Noto Sans Malayalam", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  letter-spacing: 0;
  word-spacing: 0;
  font-weight: 400;
}
:lang(ml) h1 {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 600;
}

:lang(ml) h2 {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
}

:lang(ml) h3 {
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
}

/* ------------------------------
   TYPOGRAPHY - ENGLISH + LOCAL
-------------------------------*/

/* Default English font */
body.lang-en,
.hero h2, 
.hero p, 
.card-body h3, 
.card-body p,
.nav-list a,
.site-title,
.footer-center-text,
.footer-contact p,
.ad-slot,
.small,
.muted {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    line-height: 1.85;
}

/* Hero headings */
.hero h2 {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    font-size: 2.1rem;
    line-height: 1.3;
}

/* Card headings */
.card-body h3 {
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.3;
}

/* Paragraphs */
.hero p,
.card-body p,
.footer-center-text,
.footer-contact p,
.ad-slot {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    line-height: 1.85;
}

/* Local languages */
body.lang-ml { font-family: 'Noto Sans Malayalam', sans-serif; line-height: 1.95; letter-spacing: 0; }
body.lang-ta { font-family: 'Noto Sans Tamil', sans-serif; line-height: 1.95; letter-spacing: 0; }
body.lang-te { font-family: 'Noto Sans Telugu', sans-serif; line-height: 1.95; letter-spacing: 0; }
body.lang-kn { font-family: 'Noto Sans Kannada', sans-serif; line-height: 1.95; letter-spacing: 0; }
body.lang-hi,
body.lang-mr { font-family: 'Noto Sans Devanagari', sans-serif; line-height: 1.95; letter-spacing: 0; }

/* Keep existing headings bold for all languages */
.hero h2,
.card-body h3,
.site-title {
    font-weight: 600;
}

/* Accessibility & focus states remain the same */
a:focus, button:focus, select:focus {
    outline: 3px solid rgba(229,127,25,0.18);
    outline-offset: 2px;
}


/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Montserrat', Arial, sans-serif;
  background:var(--bg);
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* ---------------------------------------------------
   HEADER / NAVBAR (UPDATED FOR BLACK BACKGROUND)
--------------------------------------------------- */
.bg-black,
.navbar,
.header-grid {
  background:#000 !important;
}

.nav-list a {
  color:#fff;
  text-decoration:none;
  font-weight:600;
  padding:8px 6px;
  border-radius:6px;
  transition:color .25s ease, background .25s ease;
}
/* FIX NAV ITEMS WRAPPING PROPERLY */
.nav-list {
    flex-wrap: wrap;              /* allow items to move to next row */
}

.nav-list li {
    white-space: nowrap;          /* keep words on a single line */
}


.nav-list a:hover,
.nav-list a.active {
  color:var(--orange);
}

/* Header grid alignment */
.container{width:90%;max-width:1100px;margin:0 auto;padding:18px}
.header-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
}
.hdr-left{display:block}
.hdr-center{text-align:center}
.site-icon{
  width:72px;height:72px;object-fit:cover;border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  transition:transform .35s ease, box-shadow .35s ease;
}
.site-icon:hover{
  transform:translateY(-6px) scale(1.03);
}
.site-title{
  margin:6px 0 0;
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:0.6px;
  color:#fff;
}

/* Language selector right */
.hdr-right{text-align:right}
.lang-label{
  display:block;
  font-weight:600;
  color:#fff;
  margin-bottom:6px;
}
.form-control{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #d0d0d0;
  min-width:170px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.form-control:focus{
  outline:none;
  border-color:var(--orange);
  box-shadow:0 0 6px rgba(229,127,25,0.18);
}

/* Header logos */
.header-logo {
  object-fit: contain;
}

.header-logo.small {
  width: 160px;
  height: auto;
}

.header-logo.large {
  width: 200px;
  height: auto;
}

@media (max-width: 768px) {
  .hdr-center {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .header-logo.small {
    width: 140px;
  }

  .header-logo.large {
    width: 170px;
  }
}


/* ----------------------
   HEADER / NAV
---------------------- */
header {
    background: #000;
    width: 100%;
    z-index: 999;
}

/* Adjust header container spacing */
.header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
}

/* Center logos */
.hdr-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Header logos */
.header-logo.small {
    width: 200px; /* preserve original size */
    height: 75px;
    object-fit: contain;
}
.header-logo.large {
    width: 200px; /* preserve original size */
    height: 225px;
    object-fit: contain;
}

/* Language selector right */
.hdr-right {
    text-align: right;
}

/* Navbar below header */
.navbar {
    background: #000;
    width: 100%;
    padding: 8px 0;
    text-align: center;
}

/* Nav list as flex row */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;           /* make items row */
    justify-content: center; /* center them horizontally */
    gap: 20px;               /* space between links */
}

/* Nav links styling */
.nav-list li a {
    color: #fff;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.25s ease, background 0.25s ease;
}
.nav-list li a:hover,
.nav-list li a.active {
    color: var(--orange);
}



/* ---------------------------------------------------
   HERO SECTION
--------------------------------------------------- */
.hero{
  background:linear-gradient(180deg,#ffffff, #fbfaf8);
  padding:60px 0 40px;
  border-bottom:1px solid #eee;
}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:28px;
  align-items:center;
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
}
.hero h2{
  font-size:2.1rem;
  margin:0 0 12px;
  text-shadow:1px 1px 2px rgba(0,0,0,.06);
}
.hero p{
  color:var(--muted);
  margin:0 0 12px;
}

.btn{
  display:inline-block;
  padding:10px 22px;
  border-radius:50px;
  font-weight:700;
  text-decoration:none;
}
.btn-orange{
  background:var(--orange);
  color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-orange:hover{
  background:var(--orange-dark);
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}

/* ---------------------------------------------------
   FOUR GRID CARDS
--------------------------------------------------- */
.grid-4cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:28px 0;
}
@media(max-width:1100px){
  .grid-4cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .grid-4cards{grid-template-columns:1fr}
}

.product-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.product-figure{
  position:relative;
  overflow:hidden;
  background:#fff;
}
.product-figure img{
  width:100%;height:220px;
  object-fit:cover;
  transition:transform .45s ease, filter .3s ease;
  display:block;
}
.product-figure:hover img{
  transform:scale(1.05);
}
.product-figure figcaption{
  position:absolute;
  bottom:0;left:0;right:0;
  background:linear-gradient(0deg, rgba(229,127,25,0.95), rgba(229,127,25,0.9));
  color:#fff;
  padding:12px;
  text-align:center;
  font-weight:600;
  opacity:0;
  transition:opacity .25s ease;
}
.product-figure:hover figcaption{opacity:1}
.card-body{
  padding:16px;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.product-card h3{
  font-size:1.15rem;
  color:var(--orange);
  margin:0 0 8px;
}

/* ---------------------------------------------------
   FOOTER (UPDATED FULLY)
--------------------------------------------------- */
footer{
  background:#111;
  color:#ddd;
  padding:35px 0;
  margin-top:24px;
  border-top:4px solid var(--orange);
}

.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  align-items:center;
}
@media(max-width:900px){
  .footer-grid{
    grid-template-columns:1fr;
    text-align:center;
  }
}

.footer-logo img{
  height:60px;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.4));
}

/* Center section */
.footer-center-text{
  font-size:.9rem;
  margin-bottom:12px;
}

/* Social icons */
.footer-social a{
  font-size:26px;
  color:var(--orange);
  margin:0 10px;
  transition:.3s;
  text-decoration:none;
}
.footer-social a:hover{
  color:#fff;
  transform:scale(1.15);
}

/* Contact block */
.footer-contact p{
  margin:4px 0;
  font-size:.9rem;
}

/* ---------------------------------------------------
   MISC
--------------------------------------------------- */
.muted{color:var(--muted)}
.small{font-size:.9rem}

.hero-animation img,
.product-figure img,
.site-icon {
  box-shadow:0 10px 30px rgba(0,0,0,0.14);
  border-radius:8px;
}

/* Ad placeholders */
.ad-slot{
  max-width:1100px;
  margin:18px auto;
  padding:12px;
  text-align:center;
  background:#fff;
  border-radius:8px;
  border:1px dashed #eee;
  color:#999;
}
.ad-top{margin-top:12px}

/* Language font families */
body.lang-ml { font-family: 'Noto Sans Malayalam', sans-serif; }
body.lang-ta { font-family: 'Noto Sans Tamil', sans-serif; }
body.lang-te { font-family: 'Noto Sans Telugu', sans-serif; }
body.lang-kn { font-family: 'Noto Sans Kannada', sans-serif; }
body.lang-hi,
body.lang-mr { font-family: 'Noto Sans Devanagari', sans-serif; }
body.lang-en { font-family: 'Montserrat', sans-serif; }

/* Accessibility focus */
a:focus, button:focus, select:focus {
  outline:3px solid rgba(229,127,25,0.18);
  outline-offset:2px;
}

footer .social a {
  font-size: 24px;
  margin: 0 8px;
  color: #E57F19;
  transition: color 0.3s ease, transform 0.3s ease;
}

footer .social a:hover {
  color: #fff;
  transform: scale(1.1);
}

/* Mobile adjustments */
@media(max-width:520px){
  .hdr-right{
    margin-top:10px;
    text-align:left;
  }
  .header-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:auto;
    align-items:center;
  }
  .site-title{font-size:1rem}
}