*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bd:#3B1F0E;--bm:#7B4A1E;--bl:#C49A6C;
  --cream:#F5EFE6;--crd:#EDE0CC;--white:#fff;
  --td:#2C1A0E;--tm:#5C3D1E;--star:#E2A83A;
}
body{font-family:'Lato',sans-serif;background:#FFF0E1;color:var(--td);overflow-x: hidden;}

/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;padding:16px 60px;background:transparent;position:fixed;top:0;z-index:100;width: 100%;transition: background 0.7s ease;border-bottom: 1px solid #FFF0E1;height: 80px;animation: fadeUp 1.5s ease both;}
.nav-logo{display:flex;align-items:center;position: absolute; left: 50%;transform: translateX(-50%);}
.nav-logo img{width:100%;height:100%;object-fit:contain}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{text-decoration:none;color:#FFF0E1;font-size: 16px; transition:color 0.3s; font-weight: 400;}
.nav-links a:hover{color:var(--bm)}
.nav-actions{display: flex; align-items: center; gap: 32px;}
.btn-login {
  background: transparent;
  height: 42px;
  color: #FFF0E1;
  padding: 0px 39px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  border: 1px solid #FFF0E1;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;

  overflow: hidden;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    gap 0.3s ease;
}
.login-icon {
  width: 0;
  opacity: 0;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateX(-8px);

  transition:
    width 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}

.btn-login:hover {
  gap: 10px;
}

.btn-login:hover .login-icon {
  width: 18px;
  opacity: 1;
  transform: translateX(0);
}
.nav-icon {cursor: pointer; color: #FFF0E1; transition: color 0.3s;}
nav.hovered, nav.scrolled {
  background: #FFF0E1 !important;
  border-bottom: 1px solid #4C220F;
}
nav.hovered .nav-logo img,
nav.scrolled .nav-logo img { filter: invert(1);}
nav.hovered .nav-links li a,
nav.hovered .nav-links a,
nav.scrolled .nav-links li a,
nav.scrolled .nav-links a
 { color: #4C220F;}
nav.hovered .btn-login,
nav.scrolled .btn-login { background: #4C220F; color: #FFF0E1;}
nav.hovered .nav-icon,
nav.scrolled .nav-icon {color: #4C220F;}
nav.hovered .nav-links a:hover,
nav.scrolled .nav-links a:hover {
  color: #7B4A1E;
}

nav.hovered .btn-login:hover,
nav.scrolled .btn-login:hover {
  background: #763d22;
  color: #FFF0E1;
  border-color: #D0B8A0;
}

nav.hovered .nav-icon:hover,
nav.scrolled .nav-icon:hover {
  color: #7B4A1E;
}


/* HERO */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 6%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  z-index: 2;
  animation: fadeRight 1.5s ease forwards;
}

.headline {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
  margin: 0;
  color: #FFF0E1;
}

.headline .mom {
  font-family: 'Libre Baskerville', serif;
  font-size: 70px;
  color: #FFF0E1;
  font-weight: 700;
  margin: 0;
}

.headline .mom i {
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 12.5%;
  text-decoration-thickness: 5%;
  margin-right: 10px;
  color: #FFF0E1;
}

.headline .ever {
  font-family: 'Libre Baskerville', serif;
  font-size: 70px;
  color: #FFF0E1;
  font-weight: 700;
  margin: 0;
}

.hero-sub {
  font-family: 'roboto', sans-serif;
  font-size: 16px;
  color: #FFF0E1;
  line-height: 1.7;
  margin: 0;
}

.btn-explore {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 18px 36px;
  border-radius: 10px;
  color: #4C220F;
  background: #FFF0E1;
  font-size: 16px;
  font-weight: 500;
  font-family: 'roboto', sans-serif;
  cursor: pointer;
  transition: all 0.3s;
  width: fit-content;
  border: 0px;
  margin-top: 34px;
}

.btn-explore:hover {
  background: #D0B8A0;
  color: #4C220F;
}

.btn-explore svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

.btn-explore:hover svg {
  transform: translateX(6px);
}

/* FEATURES */
.features{display:flex;justify-content:center;gap:60px;padding:0px;background:var(--crd)}
.feature{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}

/* ── SECTION COMMON ── */
.section-wrap {
    padding: 0px; position: relative; overflow: hidden;padding-bottom: 60px;
}
.sec-head{display:flex;align-items:center;gap:80px;padding:48px 94px 14px}
.sec-head h2{font-family:'Playfair Display',serif;font-size:48px;white-space:nowrap; color: #532C1E; font-style: italic;}
.sec-head::after{content:'';flex:1;height:2px;background:linear-gradient(to right,var(--bl),transparent)}

/* ── PRODUCT CARDS ── */
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding: 42px 60px;}
.product-card{
  background:#F6E2C7;border-radius:14px;padding:0px 16px 20px 16px;
  border:1px solid var(--cream-dark);cursor:pointer;
  transition:transform 0.3s,box-shadow 0.3s;position:relative;
}
.backp {position: absolute; width: auto; height: 100%; top: 0px;}
.card-heart{position: relative; margin-left: 10px;margin-top: 0px;transform: translateY(26px);
  width:28px;height:28px;background:var(--cream-mid);
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index: 5;
}
.card-heart svg{width:26px;fill:none;stroke:#613A12;stroke-width:1px;}
.card-heart:hover svg{fill:#613A12; stroke: none;}
.product-img {
  width:100%;aspect-ratio:1;border-radius:10px;margin-bottom:14px;z-index: 1;
  background:transparent; overflow: hidden; transition: transform 0.3s ease;
  display:flex;align-items:center;justify-content:center;font-size:48px;overflow:hidden;
}
.product-img img{ transition: transform 2s ease;}
.product-card:hover .product-img img { transform: scale(1.1);}

.product-name{font-family:sans-serif;font-size:20px;font-weight:600;color:#613A12;margin-bottom:7px;margin-left: 8px;}
.product-origin{font-size:14px;color:#724E32;margin-bottom:16px;line-height:1.5;font-weight: 400;margin-left: 8px;}
.product-footer{display:flex;align-items:center;justify-content:space-between;margin-top: 20px;margin-bottom: 10px;}
.product-price{font-size:32px;font-weight:600;color:#613A12;margin-left: 8px;}
.product-price sup{font-size:20px;vertical-align:super;color: #613A12;}
.btn-buy{
  padding:10px 40px;background:#613A12;color:#F6E2C7;margin-right: 8px;
  border:none;border-radius:8px;font-size:18px;cursor:pointer;
  font-family:'Lato',sans-serif;transition:background 0.3s; font-weight: 600;
}
.btn-buy:hover{background:#744F29}

.view-all-wrap{text-align:center;margin-top:34px; margin-bottom: 0px;position: relative;}
.btn-view-all{
  display:inline-flex;align-items:center;gap:10px;border: none;
  padding:16px 34px;border-radius:10px;
  background:#613A12;color:#F6E2C7;font-size:18px;
  font-family:'Lato',sans-serif;cursor:pointer;transition:all 0.3s;font-weight: 500;
}
.btn-view-all:hover{background:#744F29;color:#F6E2C7;}
.btn-view-all svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}
.btn-view-all:hover svg {
  transform: translateX(6px);
}

/* POPULAR */
/* ── MOST POPULAR ── */
.popular-section {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding-top: 42px;
  padding-bottom: 42px;
  padding-right: 0px;
  padding-left: 64px;
  border-radius: 24px 0px 0px 24px;
  margin-top: 84px;
  margin-left: 54px;
  margin-bottom: 57px;
  margin-right: 0px;
  overflow: hidden;
  background: transparent;
}

.popular-bg-img {
  position: absolute;
  top: 0; left: 0;
  width: fit-content; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.popular-left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 86px;
  min-width: 180px;
  padding-left: 20px;
}

.popular-title {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  color: #F5EFE6;
  line-height: 1.15;
  font-weight: 700;
  text-align: center;
}

.popular-title span {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: #C49A6C;
}

.popular-arrows {
  display: flex;
  gap: 12px;
  margin-left: 36px;
}

.pop-arr {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: #EBD4B7;
  color: #613A12;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  display: flex; align-items: center; justify-content: center;
  border: none;
}

.pop-arr:hover {
  background: #C2A37B
}


/* TESTIMONIALS */
.testi{padding:0px 60px;background:#FFF0E1;padding-bottom: 96px;}
.world {position: absolute; width: 100%; height: 100%;z-index: 0;}
.on-world { z-index: 1;position: relative;}
.testi-grid{display:flex;gap:40px;margin-top:64px; margin-bottom: 50px;}
.testi-card{flex:1;background:#613A12;border-radius:20px;padding:32px;color:#FFF0E1;display:flex;flex-direction:column;gap:0px; align-items: center;width: 284px;}
.testi-card p{font-size: 14px;line-height:1.6;color:#FFF0E1;font-weight: 300;margin-bottom: 42px;}
.stars{color:var(--star);font-size:25px;letter-spacing:2px;margin-bottom: 16px;}
.reviewer{display:flex;align-items:center;gap:10px;margin-top:auto;flex-direction: column;text-align: center;}
.reviewer img{width:56px;height:56px;border-radius:50%;object-fit:cover;border: 1px solid #FFF0E1;}
.rev-name{font-size:.85rem;font-weight:700}
.rev-role{font-size:.75rem;color:rgba(255,255,255,.5)}
.testi-nav{display:flex;justify-content:center;gap:12px;margin-top:24px}

/* FAQ */
.faq-section {
      width: 100%;
      overflow: hidden;
      background: #F0F0F0;
      font-family: Arial, sans-serif;
    }

    .faq-hero {
      width: 100%;
      height: 180px;
      overflow: hidden;
      position: relative;
      background: #000;
    }

    .faq-hero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      opacity: 0.9;
    }

    .faq-content {
      display: flex;
      justify-content: space-between;
      padding: 74px 60px 78px 60px;
      gap: 88px;
    }

    .faq-left {
      width: 32%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .faq-left h2 {
      font-family: Georgia, serif;
      font-size: 48px;
      font-style: italic;
      font-weight: 500;
      color: #6E533D;
      margin-bottom: 100px;
    }

    .faq-contact {
      width: 100%;
      text-align: center;
    }

    .faq-contact p {
      font-size: 20px;
      line-height: 1.18;
      font-weight: 600;
      color: #6E533D;
      margin-bottom: 60px;
    }

    .faq-contact-btn {
  width: 360px;
  height: 54px;
  border: none;
  border-radius: 10px;
  background: #6E533D;
  color: #F0F0F0;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 0px;

  overflow: hidden;
  transition:
    background 0.3s ease,
    gap 0.3s ease;
}
    .contact-icon {
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.faq-contact-btn:hover {
  background: #7c6048;
  gap: 20px;
}

.faq-contact-btn:hover .contact-icon {
  opacity: 1;
  transform: translateX(0);
}

    .faq-right {
      width: 68%;
      padding-top: 22px;
    }

    .faq-item {
      border-bottom: 1px solid #b29c8a;
    }

    .faq-item:last-child {
      border-bottom: none;
    }

    .faq-question {
      width: 100%;
      padding: 27px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      color: #76563d;
      font-size: 16px;
      font-weight: 400;
    }

    .faq-question span {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .faq-question span::before {
      content: "•";
    }

    .faq-icon {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
    }

    .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 40px 0 26px;
  color: #76563d;
  font-size: 15px;
  line-height: 1.6;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 160px;
  padding: 0 40px 24px 26px;
}

    .faq-item.active .faq-icon {
      transform: rotate(180deg);
      transition: transform 0.3s ease;
    }

/* BLOGS */
.blogs{background:#FFF0E1;margin-top: 48px;margin-bottom: 74px; margin-left: 60px; margin-right: 60px;}
.blog-grid{display:flex;gap:30px;margin-top:62px;margin-bottom: 50px;}
.blog-card {
  flex: 1;
  border-radius: 14px;
  overflow: hidden; /* این رو نگه دار برای border-radius کل کارت */
  background: #CCB29E;
  box-shadow: 0 4px 16px rgba(59,31,14,.08);
  transition: transform .2s;
}
.blog-img-wrapper {
  width: 100%;
  height: 246px;
  overflow: hidden; /* zoom عکس اینجا clip میشه */
}
.blog-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 2s ease;
  transform-origin: center center; /* zoom از مرکز */
}
.blog-body{padding:16px}
.blog-tag{font-size:.75rem;font-weight:700;color:var(--bm);text-transform:uppercase;margin-bottom:6px}
.blog-body h4{font-size:20px;font-weight:600;margin-bottom:6px;color: #613A12;}
.blog-body p{font: size 14px;;color:#8a6b50;line-height:1.5;margin-bottom:14px;font-weight: 400;}
.btn-explore-sm{display:inline-flex;align-items:center;gap:6px;background:transparent;color:#613A12;border:1px solid #613A12;padding:10px 20px;border-radius:6px;cursor:pointer;font: size 14px;margin-left: 170px;margin-bottom: 4px;transition: background 0.3s ease;}
.btn-explore-sm:hover { background: #bb9b82;border:1px solid #613A12; color: #4b2a0a;}
.blog-card:hover img {
  transform: scale(1.1);
}

/* ABOUT */
.about{display:flex;align-items:stretch;background: linear-gradient(to left, #ABABAB,#ffffff);}
.about-text{flex:1;padding-top: 60px; padding-left: 94px;padding-bottom: 94px;padding-right: 94px;}
.about-text p{font: size 16px;;line-height:1.8;color:#613A12;margin-bottom:16px;margin-top: 42px;font-weight: 400;}
.about-img{width:45%;object-fit:cover;;}


/* SUBSCRIBE */
.subscribe{background:var(--cream);padding:40px 60px;display:flex;flex-direction:column;align-items:center;gap:16px}
.subscribe h3{font-family:'Playfair Display',serif;font-size:1.5rem}
.sub-form{display:flex;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(59,31,14,.12)}
.sub-form input{padding:12px 20px;border:none;outline:none;font-size:.9rem;width:280px;background:#fff}
.sub-form button{background:#4B2600;color:#fff;border:none;padding:12px 24px;cursor:pointer;font-size:.9rem;transition:background .2s}
.sub-form button:hover{background:var(--bm)}

/* ── FOOTER ── */
.footer {
  background: #C9A98A;
  position: relative;
  overflow: hidden;
  padding-top: 48px;
}

.footer-inner {
  display: flex;
  gap: 40px;
  padding: 0 60px 0px;
  align-items: flex-start;
}

/* BRAND */
.footer-brand {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 44px;
  margin-bottom: 80px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-logo img {
  width: 280px;
  height: 192px;
  object-fit: contain;
}

.footer-desc {
  font-size: 16px;
  font-weight: 400;
  color: #4B2600;
  line-height: 1.7;
}

/* CENTER */
.footer-center {
  flex: 1.3;
  display: flex;
  flex-direction: column;
  gap: 52px;
  align-items: center;margin-top: 48px;
}

.footer-subscribe h4 {
  font-size: 24px;
  font-weight: 600;
  color: #4B2600;
  margin-bottom: 38px;
  text-align: center;
}

.sub-form {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(59,31,14,0.1);
  width: 474px;
  height: 50px;
}

.sub-form input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  outline: none;
  font-size: 0.9rem;
  background: #FFF0E1;
  color: #724E32;
}

.sub-form input::placeholder {
  color: #B0957A;
}

.sub-form button {
  background: #4B2600;
  color: #F5EFE6;
  border: none;
  padding: 12px 28px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: 'Lato', sans-serif;
  transition: background 0.2s;
}

.sub-form button:hover {
  background: #7B4A1E;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #4B2600;
  font-size: 16px;
  font-weight: 400;
}

.contact-item svg {
  flex-shrink: 0;
  opacity: 0.8;
}
.contact-item:hover {
  color: #816242;
}

/* RIGHT */
.footer-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: flex-end;
  margin-top: 88px;
  padding-right: 40px;
  
}

.footer-links {
  display: flex;
  gap: 48px;
}

.footer-col h5 {
  font-size: 24px;
  font-family: serif;
  font-weight: 700;
  color: #4B2600;
  margin-bottom: 36px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.footer-col ul li a {
  text-decoration: none;
  color: #4B2600;
  font-size: 18px;
  transition: color 0.2s;
  font-weight: 400;
}

.footer-col ul li a:hover {
  color: #816242;
}

.footer-social {
  display: flex;
  gap: 30px;
  margin-top: 40px;
}

.social-icon {
  width: 38px;
  height: 38px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4B2600;
  text-decoration: none;
  transition: background 0.2s;
}

.social-icon:hover {
  color: #816242;
}

/* BIG TEXT */
.footer-big-text {
  text-align: center;
  overflow: hidden;
  line-height: 0.85;
}

.footer-big-text span {
  font-family: 'Playfair Display', sans-serif;
  font-size: 238px;
  font-weight: 700;
  color: #4B2600;
  letter-spacing: 2px;
  display: block;
  transform: translateY(10%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
}
/* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(-70px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes fadeRight {
  from { opacity: 0; transform: translateY(-50%) translateX(-200px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}