/*Reset و تنظیمات   پای*/


:root {
      --primary: #0d6efd;
      --bg: #e6c6c6;
      --text: #333;
    }

* {
 box-sizing: border-box ;
 margin: 0;
 padding:0;
 /* font-family: 'Vazir', sans-serif, 'Roboto', Tahoma ; */
 font-family: "IRANSans", sans-serif; 
 } 

 /* نگ مرجانی(FC766AFF#)،خاکستری(B0B8B4FF#)،سبز(184A45FF#) */
 Body {
 /* Background: linear-gradient(to right, #8fa0a5, #184A45FF, #9abda8); */
 Background:rgb(229, 238, 237); 
 /* Color:#F95700FF;  */
 Line-height: 1.6;
 Direction: rtl ;
 } 
@media (max-width: 600px) {
    body  {
        font-size: 10px;
    
    }
}

    header {
      position: sticky;
      top: 0;
      z-index: 999;
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(12px) saturate(180%);
      -webkit-backdrop-filter: blur(12px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      border-radius: 0 0 20px 20px;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 14px 22px;
      max-width: 1200px;
      margin: 0 auto;
      border-radius: 20px;
      box-shadow: 6px 6px 12px #c9c9c9, -6px -6px 12px #ffffff;
      background: rgba(255,255,255,0.35);
      backdrop-filter: blur(20px);
    }

    /* بخش لوگو */
    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
    }

    .logo-animate {
      width:6rem;
      height: auto;
      display: block;
      animation: floatLogo 3s ease-in-out infinite;
    }

    @keyframes floatLogo {
      0% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
      100% { transform: translateY(0); }
    }

    /* منو -- میانی */
    .main-nav {
      display: flex;
      gap: 24px;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
    }

    .main-nav a {
      text-decoration: none;
      color: var(--text);
      font-weight: 600;
      padding: 10px 16px;
      border-radius: 14px;
      transition: 0.3s;
      box-shadow: 4px 4px 10px #c9c9c9, -4px -4px 10px #ffffff;
      background: rgba(255,255,255,0.45);
      backdrop-filter: blur(12px);
    }
    .main-nav a:hover {
      color: var(--primary);
      box-shadow: inset 4px 4px 10px #c9c9c9, inset -4px -4px 10px #ffffff;
    }

    /* بخش راست شامل زبان و ساعت */
    .right-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex: 0 0 auto;
    }

    .lang-btn {
      background: rgba(255,255,255,0.4);
      border-radius: 30px;
      padding: 6px 16px;
      font-weight: bold;
      border: none;
      cursor: pointer;
      box-shadow: 4px 4px 8px #c9c9c9, -4px -4px 8px #ffffff;
      transition: 0.3s;
      color: #333;
    }
    .lang-btn:hover {
      box-shadow: inset 4px 4px 8px #c9c9c9, inset -4px -4px 8px #ffffff;
    }

    #clock { font-weight: 600; color: var(--text); }

    /* موبایل - فقط همبرگر، لوگو وسط، دکمه زبان */
    @media (max-width: 768px) {
      .main-nav, .right-actions { display: none; }

      .header-inner {
        position: relative;
        padding: 8px 12px;
      }

      .mobile-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .mobile-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }

      .mobile-right { display: flex; align-items:center; }

      .logo-animate { width: 70px; }
    }

    @media (min-width: 1200px) {
      .main-nav { gap: 36px; }
    }



    /* Section wrapper */
    .hero-section{
      
      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: 2rem 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{
  color:#FC766AFF;
  margin-top: 2rem;
margin-bottom: 1rem;
  text-align: center;

}
.hover-effect:hover{
text-decoration: underline rgb(177, 116, 36) 3px ;
 text-underline-offset: 10px ;
 text-transform: 5ms;
}
section{
 background-color: rgba(0,0,0,0.2) ;
 Padding: 3rem 3rem 3rem 3rem ;
}
.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: 3px 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 a {
 Color: #b82929 ;
 /* Transition: background-color 0.3s ease; */
 text-decoration: none;
 
 } 

 .product-card a:hover {
text-decoration-line: underline;
 color: #4b5f4b;
 text-underline-offset: 4px;
 }  

.about{
  Display: flex;
  justify-content: center;
  /* Padding: 5rem 5rem 5rem 5rem ; */
  Flex-wrap: wrap;
  border-radius: 10px ;
  padding: 10px;
  max-width: 100%;
  margin-left: 2px ;
  color: #000;

}
@media screen and (max-width: 400px) {
.about p {
  float: none;
  width: 100%;
 }
}
.pic{
  border-radius: 40px 200px 40px 200px;
  width:100%; 
  height:auto;
  margin: 2px 2px 2px 2px;
  box-shadow: 6px 6px 12px #c9c9c9, -6px -6px 12px #ffffff;
}

.container1{
  Display: flex;
  margin-top: 24px;
  /* background-color: #B0B8B4FF; */
  Justify-content: center ;
   Padding: 3rem 2rem ;
  
    Flex-wrap: wrap;
}

.container1 img{
    Max-width: 100% ;
 Border-radius: 10px ;
 Margin-bottom: 1rem ;
 width: 274px;
 height: 274px;
  border-radius: 40px 100px 40px 200px;
  box-shadow: 6px 6px 12px #c9c9c9, -6px -6px 12px #ffffff;
}

.contact{
  /* Background: rgb(148, 139, 139); */
 Padding: 3rem 2rem ;
 Gap: 3rem;
 Flex-wrap: wrap;
  max-width: 100%;
 
}

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


#customer-review {
 max-width: 100%;
  margin:32px;
  padding: 20px;
  background: #184A45FF;
  border-radius: 15px;
  color: #e3e5eb;
   box-shadow: 6px 6px 12px #c9c9c9, -6px -6px 12px #ffffff;
}
#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: rgb(177, 116, 36);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  max-width:100% ;
 margin-right: auto;
}

#reviewForm button:hover {
  background: #dce4e2;
}
#reviewList {
  list-style: none;
  padding: 0;
}
#reviewList li {
  background: white;
  margin: 10px 0;
  padding: 10px;
  border-radius: 10px;
}





.features {
  Background:  linear-gradient(to bottom left, #4a5574, #1e1a78, #0f172a);
 Padding: 2rem 2rem ;
 Display: flex;
 Justify-content: center ;
 Gap: 3rem;
 Flex-wrap: wrap;
 Max-width: 100%;
 Margin: 1rem 1rem ;
  border-radius: 10px;
 } 
.feature-item {
 Flex: 1 1 250px;
 Text-align: center ;
 } 
.feature-item svg {
 Width: 50px ;
 Height: 50px;
 Margin-bottom: 1rem ;
 Fill: #dae2e9 ;
 } 
.feature-item h4 {
 Margin-bottom: 0.5rem;
  Color: #41c8d1 ;
 } 
.feature-item p {
 Margin-bottom: 0.5rem;
 Color: #e5edee ;
 } 

.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: 1rem ;
 } 
 Footer a{
 Color: #5bc0de;
 Margin: 0 0.5rem;
 } 
@media (max-width: 600px){
 Nav ul { 
 Flex-direction: column ;
 Gap: 0.7rem;
 } 
.features {
 Flex-direction: column ;
 } 
 } 



div{
 text-align: center;
}
 .h-text{
  color: #b82929 ;
  align-content: center;
 margin: 20px 20px 20px 20px;

 }
.blog-div{
  max-width: 100%;
  margin:32px;
  padding: 20px;
  background:#e3e5eb;
  border-radius: 15px;
  color: #184A45FF;
  box-shadow: 6px 6px 12px #c9c9c9, -6px -6px 12px #ffffff;
}
 .blog-p{
font-size: 20px;
 }