@font-face {
  font-family: vazir;
  src: url("font.nova/vazir-font-v18.0.0/Vazir.woff") format("woff"),
         url("font.nova/vazir-font-v18.0.0/Vazir.eot") format("eot");
  
}


:root {
  /* =========================
     🎨 Color Palette
  ========================= */

  /* Backgrounds */
  --color-bg: #FCF9F5;
  --color-bg-soft: #F7F0E8;
  --color-bg-card: #FFFFFF;
  --color-bg-accent: #F9EBDD;

  /* Brand */
  --color-primary: #DDA56C;
  --color-primary-light: #F3DCC3;
  --color-primary-dark: #C98D52;

  /* Text */
  --color-text: #252525;
  --color-text-secondary: #6F6B67;
  --color-text-light: #96908A;

  /* Borders */
  --color-border: #E7DED5;
  --color-border-light: #EFE8E1;

  /* Icons */
  --color-icon: #33312F;
  --color-icon-bg: #F8EBDD;


  /* =========================
     🌫 Shadows
  ========================= */

  --shadow-xs:
    0 1px 3px rgba(60, 45, 30, 0.05);

  --shadow-sm:
    0 4px 12px rgba(60, 45, 30, 0.06);

  --shadow-md:
   2px 8px 15px rgba(60, 45, 30, 0.08);

  --shadow-lg:
    0 16px 40px rgba(60, 45, 30, 0.10);

  --shadow-card:
    0 6px 20px rgba(75, 55, 35, 0.06);

  --shadow-button:
    0 6px 16px rgba(201, 141, 82, 0.20);


  /* =========================
     📐 Border Radius
  ========================= */

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;


  /* =========================
     📏 Mobile Sizes
  ========================= */

  --container-width: 100%;
  --container-padding: 20px;

  --section-gap: 64px;
  --element-gap: 24px;
  --card-gap: 14px;

  /* Header */
  --header-height: 60px;

  /* Hero */
  --hero-title-size: 32px;
  --hero-text-size: 15px;
  --hero-line-height: 1.9;

  /* Section Titles */
  --section-title-size: 24px;
  --section-text-size: 14px;

  /* Body */
  --body-size: 15px;
  --body-line-height: 1.9;

  /* Buttons */
  --button-height: 48px;
  --button-padding-x: 24px;

  /* Cards */
  --card-padding: 18px;
  --card-min-height: 190px;

  /* Images */
  --image-radius: 24px;


  /* =========================
     🔤 Typography
  ========================= */

  --font-family:
    "Vazirmatn",
    "IRANSans",
    Tahoma,
    sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;


  /* =========================
     ⚡ Transitions
  ========================= */

  --transition-fast: 0.7s ease;
  --transition-normal: 0.4s ease;
  --ease: cubic-bezier(.22, 1 , .36 , 1)

   /* Spacing System */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
}


html{scroll-behavior: smooth;}
html::selection{background-color: var(--color-primary);color: var(--color-bg);}
button::selection{background-color: var(--color-primary-light);color: var(--color-text-secondary);}
*{padding: 0;margin: 0;box-sizing: border-box;}
body{background-color: var(--color-bg);font-family: vazir;line-height: var(--body-line-height);}
a{text-decoration: none;color: inherit; cursor: pointer;}
ul{list-style: none;}
h2{font-size: clamp(var(--space-5), 2.3vw, var(--space-7));}
p{font-size: clamp(var(--space-3), 2vw, var(--space-4));color: var(--color-text-light);
margin: var(--space-5) 0;}



.nav-bar{background-color: #ffffff;width: 100%;height: var(--header-height);
display: flex;justify-content: space-between;align-items: center;padding: 0 var(--space-3);
box-shadow: var(--shadow-sm);border-radius: 0 0 var(--radius-sm) var(--radius-sm);
z-index: 100;position: sticky;top: 0;}
.brand{font-size: clamp(var(--space-7), 3vw, var(--space-11));}
.brand span{font-size: clamp(var(--space-4), 2.5vw, var(--space-6));margin: var(--space-1);
  color: var(--color-primary);}
.nav-bar button{width: 40px;height: 40px;border: none;cursor: pointer;
  line-height: 72px;
}
.nav-bar .phon{background-color: var(--color-bg-soft);border-radius: var(--radius-xs);
display: flex;justify-content: center;align-items: center;}
.phon svg{width: var(--space-5);height: var(--space-5);
  fill: var(--color-icon);stroke-width: 2;}
.phon svg:hover{fill: var(--color-primary-dark);}


.menu-btn{  background: transparent;
flex-direction: column;align-items: center; display: flex;
    justify-content: center;gap: 6px;}
.menu-btn span {width: 17px;height: 2px;background: var(--color-icon);
    border-radius: 9999px;transition: 0.3s ease;}

    .nav-menu {
        display: none;position: absolute;top: 60px;width: 150px;
        flex-direction: column;height: 85vh;padding: 15px;
        font-size: clamp(10px, 2.5vw, var(--space-4));color: var(--color-icon);
      }
        .nav-menu li{height: 15%;}
        .nav-menu li a{}
         .nav-menu li:hover{color: var(--color-primary-dark);transform: translateY(-3px);
          transition:  var(--transition-normal);}
         .nav-menu.active { display: flex;background-color: var(--color-bg-soft);
        justify-content: center;align-items: center;box-shadow: 3px 0px 10px #96908a3d;
      transition: var(--transition-fast);border-radius: var(--radius-pill);transition:  var(--transition-normal);}
      
        
    

/* حالت باز */
.menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);background-color: var(--color-primary-dark);}
.menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);}
.menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);background-color: var(--color-primary-dark);}



    /* =========header============ */
    .head{width: 100%;height: auto;display: flex;justify-content: center;
    flex-direction: column-reverse;align-items: center;
    }
    .head-pic{width: 60%;background-color: #C98D52;display: flex;overflow: hidden;
    aspect-ratio: 1 / 1;flex-shrink: 0;margin: var(--space-4);border-radius: var(--radius-md);
   }
    .head-pic img{width: 100%;height: 100%;object-fit: cover;display: block;}
    .head-text{width:90% ;display: flex;flex-direction: column;justify-content: center;align-items: start;}
    .head-text h1{ font-size: clamp(var(--space-5), 2.5vw, var(--space-9));margin: var(--space-4) 0;}
    
    .head-text a , .project a , .text-foot a{border: none;width: auto;font-size: clamp(var(--space-3), 1.8vw, var(--space-4));
    display: flex;align-items: center;justify-content: center;padding: var(--space-2) var(--space-7);
    border-radius: var(--radius-lg);margin: var(--space-6) 0;background-color: var(--color-primary);
    gap: var(--space-2);color: var(--color-bg-card);font-weight: 500;opacity: 0.8;font-family: vazir;
    letter-spacing: 1px;}
    .head-text a:hover , .project a:hover ,.text-foot button:hover{font-weight: 900;}
    .head-text a:hover svg , .project a:hover svg{transform: translateX(-4px);}
    .head-text a svg, .project a svg{width: var(--space-4);height: var(--space-4);stroke: var(--color-bg-card);}



/* ===========main========== */
    .main{margin: 0 4%;display: flex;flex-direction: column;align-items: center;
    width: calc(100% - 8%);height: auto;}

    /* =========خدمات============ */
    .servic{width: 100%;height: auto;display: flex;margin-top: var(--space-8);
    flex-direction: column;justify-content: center;align-items: center;text-align: center;}
    
    .line-star{display: flex;justify-content: center;align-items: center;
    width: 200px;height: 20px;}
    .line-star .line{color: var(--color-primary);
    font-size: var(--space-3);font-weight: 100;}
    .line-star .star{color: var(--color-primary);font-size: var(--space-3);margin: var(--space-2);}
    .cont-servic{width: 100%; display: flex;flex-direction: row;gap: 2%;justify-content: center;
    align-items: center;margin-top: var(--space-3);flex-wrap: wrap;}
    
    .box-servic{width: calc(50% - 2%);background-color: var(--color-bg-card);
    display: flex;justify-content: start;align-items: center;flex-direction: column;
    padding: 1%;text-align: center;border-radius: var(--radius-md);overflow: hidden;
    box-shadow: var(--shadow-card);flex-shrink: 0;margin: 6px 0;}
    .icon-servic{width: 20%;aspect-ratio: 1 / 1;background-color: var(--color-bg-accent);margin: var(--space-1) 0;
    border-radius: var(--radius-pill);display: flex;align-items: center;justify-content: center;
  border: 1px solid var(--color-primary);}
    .icon-servic svg{width: 100%;height: 100%; stroke-width: 1px;padding: 5px;stroke: var(--color-primary-dark);}
    .box-servic h3{font-size: clamp(var(--space-4), 2vw, var(--space-5));font-weight: 500;
    margin: var(--space-2) 0;}
    .box-servic p{font-size: clamp(var(--space-2), 1.8vw, 14px);margin: 0 0 var(--space-2) 0;
      color: var(--color-text-secondary);font-weight: 200;}



      /* =======درباره من ======== */
    .about-my{width: 100%;display: flex;flex-direction: column-reverse;text-align: center;
    justify-content: space-between;align-items: center;padding: 1.5%;margin: var(--space-7) 0;}
    .pic-about{width: 60%;background-color: #C98D52;display: flex;overflow: hidden;
    aspect-ratio: 1 / 1;flex-shrink: 0;margin: var(--space-4);border-radius: var(--radius-md);}
    .pic-about img{width: 100%;height: 100%;object-fit: cover;display: block;
    }
    .text-about{display: flex;justify-content: center;align-items: center;flex-direction: column;}
    .text-about h5{font-size: clamp(var(--space-4), 2vw, var(--space-7));}
    


      /* =========نمونه کار ها========= */

      .project{width: 100%;display: flex;flex-direction: column;align-items: center;
        justify-content: center;margin-top: var(--space-5);}
        .project h2{font-size: clamp(var(--space-4), 2vw, var(--space-7));}
        .project p{margin: var(--space-5) 0;}
      .cont-project{display: flex;flex-direction: row;gap: 3%;width: 100%;margin: var(--space-3) 0;}
      .pic-project{width: calc(30% );aspect-ratio: 1/1.3;
        border-radius: var(--radius-xs);overflow: hidden;
      }
      .pic-project img{width: 100%;height: 100%;display: block;}
      /* =====تنظیمات دکمه رو با دکمه هدر باهم گذاشتم تو قسمت هدر===== */
      .project a{background-color: transparent;border: 1px solid var(--color-primary);
      color: var(--color-text);}
      .project a svg{stroke: var(--color-text);}





      /* ===========فوتر============= */
      .footer{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;
      background-color: var(--color-bg-soft);border-radius: var(--radius-sm);} 
      .text-foot{display: flex;align-items: start;flex-direction: column;justify-content: start;width: 100%;
      padding: var(--space-4)}
      .text-foot h6{font-size: clamp(var(--space-3), 2.5vw, var(--space-7));margin: var(--space-3);}
      
      .text-foot a{padding: var(--space-2) var(--space-3);font-size: clamp(10px, 2vw, var(--space-4));
      margin: var(--space-3) var(--space-5);}
       .text-foot a svg{width: var(--space-4);height: var(--space-4);stroke: var(--color-bg);
      fill: none;stroke-width: 2;}
      .communicat{display: flex;gap: 8%;width: 100%;justify-content: center;}
      .commun-icon{width: 12%;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;margin-bottom: 10px;
        border-radius: var(--radius-pill);border: 1px solid var(--color-text-light);}
        .commun-icon svg{width: 50%;aspect-ratio: 1/ 1;stroke: none;opacity: 0.7;}
        .insta:hover svg{}
        .commun-icon:hover svg{filter: brightness(0);width: 55%;transition: var(--transition-normal);}



        .final-text{font-size: clamp(var(--space-2), 2.5vw, var(--space-3));color: var(--color-text-light);
        margin: var(--space-2) 0;}


        


      @media (min-width: 520px){
        .head{flex-direction: row;}
        .box-servic{height: auto;aspect-ratio: 1 /0.7;}
        .head-pic{width: 30%;margin-left: var(--space-7);}
        .head-text{width: 60%;}
        .about-my{flex-direction: row-reverse;}
        .pic-about{width: 30%;margin-right: var(--space-7);}
        .text-about{width: 70%;}
        .text-about h5{}
        .commun-icon{width: 15%;}
        .footer{flex-direction: row;}
        .text-foot{}
        .communicat

      }

      @media (min-width: 768px){
        .cont-servic{}
        .box-servic{width: calc(25% - 2%);aspect-ratio: 1 / 1.2;}
        .icon-servic{width: 25%;}
       .icon-servic svg{padding: 8px;}
       .head-pic , .pic-about{width: 25%;}
       .commun-icon{width: 13%;}
      }
      @media (min-width: 992px){
        .box-servic{aspect-ratio: 1 / 1;}
        .commun-icon{width: 10%;}
      }
      @media (min-width: 1200){}