/* styles.css - clean, no libs. Font family Georgia, base font-size 14px */
:root{
  --bg:#ffffff;
  --text:#222;
  --muted:#666;
  --accent:#2166ff; /* blue accent */
  --shadow: 0 6px 18px rgba(33,102,255,0.12);
  --card-bg:#fbfbff;
  font-family: Georgia, serif;
  font-size:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:14px;
}

/* Fixed header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  padding: 15px 30px;
   display:flex;
  align-items:center;
  justify-content:space-between;
   background:rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(0,0,0,0.04);
  z-index:2000;
}

/* Burger on left */
.burger{
  width:44px;
  height:44px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:1px solid transparent;
}
.burger span{display:block;width:18px;height:2px;margin:3px 0;background:var(--text);transition:all .2s}

/* Centered animated logo */
.logo-wrap{
   
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-logo{display:flex;align-items:center;gap:10px;cursor:pointer}
.logo-circle{
   display: flex;
   align-items: center;
   justify-content: center;
   color: #fff;
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#5aa0ff);
  box-shadow: 0 8px 20px rgba(33,102,255,0.14);
   transform-origin:center;
  animation:logo-breathe 3s ease-in-out infinite;
}

.container {
   max-width: 1400px;
   width: 100%;
   padding: 0 35px;
   margin: 0 auto;

}
@keyframes logo-breathe{
  0%{transform:scale(1)}
  50%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.logo-text{font-weight:700;color:var(--accent);letter-spacing:0.6px}

/* Nav hidden by default (burger toggles) */
.main-nav{
  position:relative;
}
.main-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.main-nav a{text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:6px}
.main-nav a:hover{color:var(--text);background:rgba(33,102,255,0.06)}
img {
   object-fit: cover;
}
.faq.container {
   padding-top: 0;
}
/* Hero diagonal */
.hero{
  padding-top:120px; /* allow for fixed header */
  padding-bottom:48px;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.avh-hero.about-page {
   background: linear-gradient(45deg, #0000003e,#0000005c),url('root/Neem.jpg') center/cover no-repeat;
}
.hero-inner{
  width:90%;
  max-width:1200px;
  display:flex;
  gap:30px;
  align-items:center;
  transform:skewY(-3deg); /* diagonal effect */
  background:linear-gradient(180deg,#fff,#dde2d7);
  padding:28px;
  border-radius:12px;
  box-shadow:var(--shadow);
}
.hero-inner *{transform:skewY(3deg)} /* counter skew for content readability */
.hero-media{flex:1;min-width:320px;display:flex;align-items:center;justify-content:center}
.hero-video{width:100%;height:100%;max-height:360px;object-fit:contain;border-radius:8px}
.hero-text{flex:1;padding:12px}
.hero-text h1{font-size:28px;margin:0 0 8px}
.hero-text p{color:var(--muted);margin:0 0 18px}
.cta-btn{display:inline-block;padding:12px 18px;background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;box-shadow:var(--shadow)}

/* CTA block */
.cta-block{display:flex;gap:18px;align-items:center;padding:36px 6%;margin-top:28px}
.cta-media .small-video{width:320px;height:180px;border-radius:8px;box-shadow:var(--shadow)}
.cta-content h2{margin:0 0 8px}
.btn-shadow{display:inline-block;padding:12px 18px;border-radius:6px;background:var(--accent);color:#fff;text-decoration:none;box-shadow:var(--shadow)}

/* Products grid */
.products-grid{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;
justify-content: center;}
.product-card{width:calc(33.333% - 12px);background:var(--card-bg);border-radius:8px;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,0.06)}
.product-card img{width:100%;height:180px;object-fit:cover}
.card-body{padding:12px}
.card-body h4{margin:0 0 6px}
.price{font-weight:700;margin-top:8px}
.pay-model{color:var(--muted);font-size:13px;margin-top:6px}
.buy-btn{display:inline-block;margin-top:10px;padding:10px 12px;background:var(--accent);color:#fff;text-decoration:none;border-radius:6px;box-shadow:var(--shadow)}
.outline-btn{display:inline-block;padding:8px 12px;border-radius:6px;border:1px solid var(--accent);background:transparent;text-decoration:none}

/* Buttons hover gloss effect */
a.buy-btn:hover, .cta-btn:hover, .btn-shadow:hover{
  filter:brightness(1.03);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
}

/* FAQ tabs */
.faq .tabs{margin-top:12px}
.tab{padding:8px 12px;
    outline: none;
   border:none;background:transparent;border-bottom:2px solid transparent;cursor:pointer}
.tab.active{border-bottom-color:var(--accent);color:var(--accent)}
.tab-content{padding:12px 0}
.hidden{display:none}

/* Footer (2-column gradient) */
.site-footer{
   padding:28px;
  display:flex;
  gap:24px;
  justify-content:space-between;
  background:linear-gradient(90deg,#f9fbff,#eef6ff);
  border-top:1px solid rgba(0,0,0,0.04);
}
.footer-col{flex:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.footer-menu a{display:block;color:var(--muted);text-decoration:none}
.footer-menu a:hover {
   text-decoration: underline;
}

.footer-logo{font-weight:700;color:var(--accent)}
.payments{list-style:none;padding:0;margin:0;color:var(--muted)}
.map-small iframe{width:100%;height:120px;border:0;margin-top:8px;border-radius:6px;box-shadow:var(--shadow)}

/* Forms */
.select-form{display:flex;gap:8px;align-items:center;margin-top:12px}
.select-form select{padding:10px;border:1px solid #ddd;border-right:1px solid #ccc;border-bottom:1px solid #ccc;border-radius:6px;appearance:none}
.select-form .outline-btn{padding:10px 14px}

/* Responsive / breakpoints */
@media (max-width:800px){
  .products-grid .product-card{width:calc(50% - 12px)}
  .hero-inner{flex-direction:column;transform:none}
  .hero-inner *{transform:none}
  .logo-wrap{position:static;transform:none}
}
@media (max-width:420px){
  .products-grid .product-card{width:100%}
   .hero-video{max-height:220px}
}

/* Accessibility focus */
a:focus, button:focus{outline:3px solid rgba(33,102,255,0.18);outline-offset:2px}
.avh-btn {
  background-color: #7b9c5a;
  color: #fff;
  padding: 12px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.3s;
}
.avh-btn:hover {
  background-color: #668446;
}

/* Section spacing */
section, section.container {
  padding: 80px 5%;
  text-align: center;
}

/* 1. Hero */
.avh-hero {
  background: url('root/Radiant.webp') center/cover no-repeat;
  color: white;
  padding: 140px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avh-hero-content {
  max-width: 600px;
  background: rgba(0, 0, 0, 0.65);
  padding: 40px;
  border-radius: 20px;
}

/* 2. Philosophy */
.avh-philosophy {
   border-radius: 20px;
   color: #fff;
  max-width: 900px;
  margin: auto;
  box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
background: linear-gradient(85deg, #2166ff,#7b9c5a);width: 90%;}

/* 3. Seasonal kits */
.avh-seasonal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.avh-seasonal-grid article {
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s;
}
.avh-seasonal-grid article:hover {
  transform: translateY(-8px);
}
.avh-seasonal-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* 4. Ingredients */
.avh-ingredient-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.avh-ingredient-grid div {
  background: #fff;
  border-radius: 15px;
  width: 250px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.avh-ingredient-grid img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
  aspect-ratio: 1/1;
}

/* 5. Rituals */
.avh-rituals {
  background: linear-gradient(to right, #c8d6b9, #f0efe6);
  color: #2b2b2b;
}
.avh-rituals-content {
  max-width: 800px;
  margin: auto;
}

/* 6. Testimonials */
.avh-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.avh-testimonial-grid blockquote {
  background: #fff;
  border-radius: 20px;
  padding: 25px;
  font-style: italic;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 7. Blog */
.avh-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.avh-blog-grid article {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  overflow: hidden;
  transition: transform 0.3s;
}
.avh-blog-grid article:hover {
  transform: translateY(-8px);
}
.avh-blog-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* 8. Newsletter */
.avh-newsletter {
  background: #7b9c5a;
  color: white;
  border-radius: 20px;
  max-width: 800px;
  margin: auto;
  padding: 60px 5%;
}
.avh-news-form {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.avh-news-form input {
  padding: 12px 16px;
  border-radius: 25px;
  border: none;
  outline: none;
  width: 250px;
}
.avh-news-form button {
  background-color: #fff;
  color: #7b9c5a;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  transition: background 0.3s;
}
.avh-news-form button:hover {
  background-color: #e7e7e7;
}.avh-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
 
.avh-btn-alt {
  background:#2b2b2b;
}
.avh-btn-alt:hover {
  background:#222;
}
 
.avh-hero h1 { font-size: 2.5rem; margin-bottom: 10px; }
.avh-hero p { font-size: 1.2rem; margin-bottom: 25px; }

/* Featured */
.avh-featured h2 { text-align: center; margin-bottom: 40px; }
.avh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}
.avh-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s;
}
.avh-card:hover { transform: translateY(-5px); }
.avh-card img { width: 100%; height: 180px; object-fit: cover; }

/* Doshas */
.avh-doshas { background: linear-gradient(to right, #668446, #bed8fc, #7b9c5a); color: #000; padding: 80px 20px; }
.avh-dosha-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
}
.fav-section .product-card {
   background: lightgray;
}
.avh-dosha {
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px;
  width: 280px;
  text-align: center;
}

/* Bestsellers Carousel */
.avh-bestsellers { padding: 80px 20px; text-align: center; }
.avh-carousel { position: relative; overflow: hidden; }
.avh-slide { display: none; }
.avh-slide.active { display: block; }
.avh-slide img { width: 100%; max-width: 400px; border-radius: 16px; margin-bottom: 15px; }
.avh-carousel-controls { margin-top: 20px; }
.avh-carousel-controls button {
  background: var(--avh-green);
  border: none;
  color: white;
  font-size: 22px;
  border-radius: 50%;
  width: 40px; height: 40px;
  margin: 0 5px;
  cursor: pointer;
}

/* Ingredients */
.avh-ingredients { background: white; padding: 80px 20px; }
.avh-ingredients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  text-align: center;
}
.avh-ingredients-grid img { border-radius: 12px; width: 100%; height: 160px; object-fit: cover; }

/* Subscription */
.avh-subscription {
  background: #2b2b2b;
  color: white;
  text-align: center;
  padding: 80px 20px;
}
.avh-subscription h2 { margin-bottom: 10px; }

/* Testimonials */
.avh-testimonials { background: var(--avh-beige); padding: 80px 20px; }
.avh-testimonial-grid {
  display: grid;
  gap: 25px;
  text-align: center;
}
.avh-testimonial-grid blockquote {
  background: white;
  padding: 25px;
  border-radius: 12px;
  font-style: italic;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}
.avh-testimonial-grid span {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color: var(--avh-green);
}

/* CTA */
.avh-cta {
  background: linear-gradient(to right, #668446, #7b9c5a);
;
  color: white;
  text-align: center;
  padding: 80px 20px;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

.avh-cta.container {
   width: 95%;
}/* AyurVedaHome ABOUT PAGE STYLES */

:root {
  --avh-green: #3c7a57;
  --avh-cream: #f5f3ef;
  --avh-brown: #5a4633;
  --avh-light: #ffffff;
}

.avh-container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  text-align: center;
  padding: 4rem 0;
}

.avh-container h2 {
  color: var(--avh-green);
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
 

/* Vision Section */
.avh-vision {
  background: var(--avh-cream);
  border-top: 3px solid var(--avh-green);
  border-bottom: 3px solid var(--avh-green);
}

/* Roots Section */
.avh-roots {
  background: var(--avh-light);
}

.avh-roots-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.avh-roots-text {
  flex: 1 1 45%;
  text-align: left;
}

.avh-roots-image {
  flex: 1 1 45%;
}

.avh-roots-image img {
  width: 100%;
  border-radius: 12px;
}

/* Team Section */
.avh-team {
  background: var(--avh-cream);
}

.avh-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.avh-member img {
  width: 150px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  margin-bottom: 1rem;
  border: 4px solid var(--avh-green);
}

.avh-member h4 {
  color: var(--avh-green);
  margin-bottom: 0.5rem;
}

/* Sustainability Section */
.avh-sustainability {
  background: var(--avh-light);
  border-top: 2px dashed var(--avh-green);
  border-bottom: 2px dashed var(--avh-green);
}

.avh-sustain-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  list-style: none;
  margin-top: 1.5rem;
  padding: 0;
}

.avh-sustain-list li {
  background: var(--avh-cream);
  padding: 0.8rem 1.2rem;
  border-radius: 20px;
  color: var(--avh-green);
  font-weight: 600;
}

/* Timeline Section */
.avh-timeline {
  background: var(--avh-cream);
}

.avh-timeline-line {
  position: relative;
  padding-left: 80px;
  border-left: 3px solid var(--avh-green);
  text-align: left;
    width: 80%;
  margin: 30px auto 0;
}
.product-actions {
   display: flex;
   gap: 10px;
   margin-top: 10px;
   align-items: center ;
   justify-content: center;
}.product-actions span {
   margin: 0;
}
.avh-timeline-item {
   padding-left: 50px;
  margin-bottom: 2rem;
  position: relative;
}

.avh-year {
  font-weight: bold;
  color: var(--avh-green);
  background: var(--avh-light);
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  position: absolute;
  left: -3.8rem;
  top: 0;
}

@media (max-width: 768px) {
  .avh-roots-grid,
  .site-header,.site-footer,.products-grid,.cta-block {
    flex-direction: column;
  }.site-header {
   gap: 20px;
  }
  .avh-timeline-line {
    border-left: none;
    padding-left: 0;
  }
  .avh-year {
    position: static;
    display: block;
    margin-bottom: 0.5rem;
  }.avh-timeline-item {
   padding-left: 0;
  }.products-grid .product-card {
   width: 100%;
  }
}