/*Reset و تنظیمات   پای*/
• {
 Box-sizing: border-box ;
 Margin: 0;
 Padding: 0;
 Font-family: 'Vazir', sans-serif, 'Roboto', Tahoma ;
 } 
 Body {
 Background: #fff;
 Color: #1aacd8 ;
 Line-height: 1.6;
 Direction: rtl ;
 } 

header {
 Display: flex;
 Justify-content: space-between ;
 Align-items: center ;
 Padding: 1rem 2rem;
 Border-bottom: 2px solid #82dbe7 ;
 Background:#ffffff;
 Position:relative;
 Top:0;
 z-index: 1000 ;

 height:100px;
 } 
 
.meno{
align-items: center;
 text-align: center;
 background:rgba(10, 64, 170, 0.35);

 padding: 10px 10px 5px 5px;
 font-size: 20px;
 margin-top: 45px;
 width: 600px;
 height:60px;
 border-radius: 20px;
 margin-right: 100px;

 }

.menu{
  text-decoration: none;
  color:  rgb(53, 18, 209);

}
 .menu:hover{
  text-decoration: underline ;
 color:rgb(216, 158, 71);
 }
 
 nav ul {
 list-style:none;
 Display: flex;
 Gap: 2rem;
 justify-content: space-around;
 
 } 
 nav ul li {
 Font-weight: 700 ;
 } 

.lang-btn {
  background: rgb(216, 158, 71);
  color: #0d6efd;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  font-weight: bold;
}

/* *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{font-family: 'Segoe UI', Tahoma, Roboto, "Helvetica Neue", Arial;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;padding:24px} */

    /* Section wrapper */
    .hero-section{
      width:100%;
      max-width:1200px;
      height:70vh;
      min-height:420px;
      position:relative;
      overflow:hidden;
      border-radius:14px;
      box-shadow:0 10px 30px rgba(0,0,0,.6);
      margin-right: 40px;
    }

    /* Background image layer */
    .hero-bg{
      position:absolute;
      inset:0;
      background-repeat:no-repeat;
      background-size:cover;
      background-position:center center;
      transform:scale(1);
      transition:transform 10s ease;
      will-change:transform;
    }

    /* gentle slow zoom for motion (parallax-like) */
    .hero-section:hover .hero-bg{
        transform:scale(1.05)
    }

    /* dark overlay to improve text contrast */
    .overlay{
        position:absolute;
        inset:0;
        background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
        pointer-events:none}

    /* Content container */
    .hero-content{
        position:relative;
        z-index:2;
        height:100%;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        padding:48px;gap:12px}

    /* Title */
    .title{
      font-size:clamp(24px,4.5vw,48px);
      line-height:1.05;
      font-weight:700;
      letter-spacing:0.4px;
      opacity:0;
      transform:translateY(18px);
      animation:fadeUp 900ms cubic-bezier(.2,.9,.2,1) 300ms forwards;
      color: rgb(216, 158, 71);

    }
    .subtitle{font-size:clamp(14px,2.2vw,20px);
      opacity:0;
      transform:translateY(12px);
      animation:fadeUp 900ms cubic-bezier(.2,.9,.2,1) 600ms forwards;
      color:#f7f6f6}

    /* Button (optional) */
    .cta{
      display:inline-block;
      margin-top:12px;
      padding:10px 16px;
      border-radius:10px;
      background:rgba(255,255,255,0.95);
      color:#111;font-weight:600;text-decoration:none;
      opacity:0;
      transform:translateY(6px);
      animation:fadeUp 900ms cubic-bezier(.2,.9,.2,1) 900ms forwards
    }

    @keyframes fadeUp{
      to{opacity:1;
        transform:none}
    }

    /* small decorative animated stripes at bottom-right */
    .stripes{position:absolute;right:18px;bottom:18px;display:flex;gap:6px;z-index:3}
    .stripe{width:36px;height:6px;background:rgba(255,255,255,0.06);border-radius:4px;transform-origin:left;animation:stripeMove 1.6s infinite ease-in-out}
    .stripe:nth-child(1){animation-delay:0s}
    .stripe:nth-child(2){animation-delay:0.2s;width:48px}
    .stripe:nth-child(3){animation-delay:0.4s;width:28px}
    @keyframes stripeMove{0%{transform:scaleX(.4)}50%{transform:scaleX(1)}100%{transform:scaleX(.4)}}

    /* Responsive tweaks */
    @media (max-width:700px){
      .hero-section{height:56vh;padding:0;border-radius:10px}
      .hero-content{padding:18px}
      .title{text-shadow:0 6px 18px rgba(0,0,0,.5)}
    }

 a {
 Color: #0275d8 ;
 Text-decoration: none ;
 } 
 a:hover {
 Text-decoration: underline ;
 } 

.hero {
 Background: #e6f0ff;
 Text-align: center ;
 Padding: 4rem 1rem ;
 } 
.hero h1 {
 Font-size: 2.5rem ;
 Margin-bottom: 1rem ;
 Color: #0275d8 ;
 } 
.hero p {
 Font-size: 1.2rem ;
 Margin-bottom: 2rem ;
 Max-width: 600px;
 Margin-left: auto;
 Margin-right: auto ;
 } 
.btn-primary{
 Background-color: #0275d8 ;
 Color: #fff ;
 Padding: 0.75rem 1.5rem;
 Border-radius: 5px ;
 Font-weight: 600 ;
 Cursor: pointer ;
 Transition: background-color 0.3s ease;
 Border: none ;
 } 
.btn-primary:hover {
 Background-color: #025bb5 ;
 }

.hover-effect{
  margin-top: 2rem;
margin-bottom: 1rem;
  text-align: center;
}
.products {
 /* margin-top :24px; */
 Padding: 3rem 2rem ;
 Max-width: 1200px;
 Display: grid ;
 Grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) ;
 Gap: 2rem;
 } 
.product-card {
  
 Border: 1px solid #eee ;
 Border-radius: 8px ;
 Padding: 1rem ;
 Text-align: center ;
 Box-shadow: 0 2px 5px rgba(0,0,0,0.05) ;
 Background: #fff;
 } 
.product-card img {
 Max-width: 100% ;
 Border-radius: 5px ;
 Margin-bottom: 1rem ;
 width: 474px;
 height: 274px;
 } 
.product-card h5 {
 Margin-bottom: 2rem;
 Color: #333 ;
 } 
.product-card p {
 Color: #666 ;
 /* Margin-bottom:2rem ; */
 } 
.product-card button {
 Background-color: #5cb85c;
 Color: white ;
 Border: none ;
 Padding: 0.5rem 1rem;
 Border-radius: 5px ;
 Font-weight: 600 ;
 Cursor: pointer ;
 Transition: background-color 0.3s ease;
 /* margin-bottom:2rem; */
 /* margin-top: 2rem; */
 } 
 .product-card button:hover {
 Background-color: #4cae4c;
 } 

.about{
    Display: flex;
    /* margin-top: 24px; */
    background-color: rgb(150, 140, 140);
    justify-content: center;
    Padding: 3rem 2rem ;
  
    Flex-wrap: wrap;
    /* width:100%;  */
    /* Margin: auto ;  */
}
.about p{
  background-color: #5bc0de;
  border-radius: 10px ;
  padding: 10px;
  max-width: 900px;
  margin-left: 2px ;
}

.pic{
  border-radius: 10px;
  width:500px; 
  height:500px;margin: 2px;
}

.container1{
  Display: flex;
  margin-top: 24px;
  background-color: rgb(150, 140, 140);
  Justify-content: center ;
  
}
.contact{
  /* Background: rgb(148, 139, 139); */
 Padding: 3rem 2rem ;
 Gap: 3rem;
 Flex-wrap: wrap;
 width: 45%;
 
}

.contact p{
background-color: #5bc0de;
border-radius: 10px ;
padding: 10px;
}


#customer-review {
 width: 50%;
  margin: 40px auto;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 15px;
}
#customer-review h2, h3 {
  text-align: center;
}
#reviewForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#reviewForm input, #reviewForm textarea {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
}
#reviewForm button {
  background: #007b5e;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}
#reviewForm button:hover {
  background: #005c44;
}
#reviewList {
  list-style: none;
  padding: 0;
}
#reviewList li {
  background: white;
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
}





.features {
 Background: #f9f9f9;
 Padding: 3rem 2rem ;
 Display: flex;
 Justify-content: center ;
 Gap: 3rem;
 Flex-wrap: wrap;
 Max-width: 900px;
 Margin: auto ;
 } 
.feature-item {
 Flex: 1 1 250px;
 Text-align: center ;
 } 
.feature-item svg {
 Width: 50px ;
 Height: 50px;
 Margin-bottom: 1rem ;
 Fill: #0275d8 ;
 } 
.feature-item h4 {
 Margin-bottom: 0.5rem;
 Color: #0275d8 ;
 } 
.register-section {
 Background: #0275d8 ;
 Padding: 3rem 2rem ;
 Color: white ;
 Text-align: center ;
 } 
.register-section form {
 Max-width: 400px;
 Margin: auto ;
 Display: flex;
 Flex-direction: column ;
 Gap: 1rem;
 } 
.register-section input {
 Padding: 0.75rem;
 Border: none ;
 Border-radius: 5px ;
 Font-size: 1rem ;
 } 
.register-section button {
 Background-color: #fff ;
 Color: #0275d8 ;
 Border: none ;
 Padding: 0.75rem;
 Border-radius: 5px ;
 Font-weight: 600 ;
 Cursor: pointer ;
 Transition: background-color 0.3s ease;
 } 
.register-section button:hover {
 Background-color: #ddd ;
 } 
 Footer {
 Background: #222 ;
 Color: #aaa;
 Padding: 2rem ;
 Text-align: center ;
 Font-size: 0.9rem ;
 } 
 Footer a{
 Color: #5bc0de;
 Margin: 0 0.5rem;
 } 
@media (max-width: 600px){
 Nav ul { 
 Flex-direction: column ;
 Gap: 0.7rem;
 } 
.features {
 Flex-direction: column ;
 } 
 }