:root {
    --text-color: #333333;
    --app-bg-color: #9c9c9c;
    --section-bg-color: #d1cece;
    --primary-dark: #d4af37;
    --primary-color: #001531;
}


header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem;
  background: var(--section-bg-color);
  box-shadow: 0 0 .5rem var(--primary-color);
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap; 
}

.logo-box {
  width: 120px;
  height: 135px;
  border-radius: 100%;
  box-shadow: 0px 5px 5px var(--primary-dark);
  overflow: hidden;
  background: #eee; /
}

.logo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.header-info h1 {
  margin: 0;
  font-size: 2.2rem;
  color: var(--primary-color);
}

.header-info p {
  margin: 0;
  font-size: 1rem;
  color: #444;
  max-width: 450px; /* کمی پهن‌تر */
  line-height: 1.6;
}

.back-btn {
  background: var(--primary-color);
  color: #fff;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 1rem;
  margin-left: auto; 
  margin-right: auto; 
  font-family: "dana";
}

.back-btn:hover {
  background: #a0132e;
}

.wrapper {
  box-shadow: 0px 5px 5px rgba(212, 175, 55, 0.5);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.media-grid, .holder{
  display: flex;
  gap: 1rem;
  max-width: 250px;
  padding: 2rem 1rem;
  border-radius: 3rem;
}

.holder{
    background-color: var(--app-bg-color);
}

.media-item{
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 1.25rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.media-video{
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;

  border-radius: 1.25rem;
  overflow: hidden;
  object-fit: cover;
}

.vid{
  object-fit: contain;
}

.media-card .media-item:only-child{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1.25rem;
}

.media-card{
  display: flex;
}

.tree {
  width: 30rem;
  height: 25rem;
}

.wrap{
  color: #fff;
  z-index: 1;
  padding: 2rem;
}

.margin{
  margin-top: 5rem;
}

.major-card{
  padding: 1.5rem;
}

.pics {
  width: 47rem;
  height: 25rem;
}

.header-img{
  width: 300px;
}

/* دکمه های دسترسی سریع */
.quick-access {
  display: flex;
  gap: 15px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.quick-btn {
  padding: 10px 18px;
  background-color: var(--primary-dark);
  color: #fff;
  text-decoration: none;
  border-radius: 5rem;
  transition: 0.3s;
  font-size: 14px;
}

.quick-btn:hover {
  background-color: #ac8e2cb6;
}

.audio-default {
  width:100%;
  max-width:520px;
  border-radius:12px;
}

.audio-skin {
  padding: 10px 12px;
  background: #0b1220;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}

.footer{
  background-color: var(--primary-color);
}



@media screen and (max-width: 576px) {
  .wrapper {
    padding: 2rem 12px;
  }
    .tree {
    width: 270px;
    height: 200px;
  }


hr{
  width: 200px;
}
}

@media (max-width: 768px) {
  header {
    padding: 2rem;
    flex-direction: column; 
    text-align: center;
  }
  .header-left {
    flex-direction: column;
    gap: 1rem;
  }
  .logo-box {
    width: 100px;
    height: 100px;
  }
  .back-btn {
    width: 80%; 
    max-width: 300px;
  }
  main {
    padding: 1.5rem;
  }
  main h2 {
    font-size: 1.8rem;
  }
  .major-section h3 {
    font-size: 1.6rem;
  }
  .scroll-container::before,
  .scroll-container::after {
    width: 0.7rem; 
  }
  section{
      padding: 2rem 5px;
  }
  .scroll-content {
  display: flex;
  overflow-x: none; 
  flex-wrap: wrap;
}
.product-card-scroll {
flex: content;
}

}
@media (max-width: 400px) {
  
.major-section {
  margin-bottom: 1rem;
  padding-bottom: .5rem;
}
.scroll-container {
  padding: .5rem;
}
}