@font-face {
   font-family: "sahel";
   font-style: normal;
   font-weight: 200;
   src: url('../fonts/sahel.ttf')
 }

 /* RESET */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "sahel";
 }

 body {
   background: #fff;
   color: #000;
   line-height: 1.6;
   overflow-x: hidden;
 }


   html , body{
        cursor: auto !important;
      }
      a{
        cursor: pointer !important;
      }
      div.panel{
        /* cursor: pointer !important; */
      }
 body::-webkit-scrollbar {
   display: none;
 }

 /* برای فایرفاکس */


 html {
   scroll-behavior: smooth;
 }

 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px white inset !important;
   -webkit-text-fill-color: unset !important;
   /* رنگ متن مورد نظرت را اینجا بگذار */
 }

 /* مخفی کردن اسکرول‌بار */

 .custom-cursor {
   position: fixed;
   top: 0;
   left: 0;
   width: 20px;
   /* اندازه دلخواه */
   height: 20px;
   pointer-events: none;
   /* مهم: مانع کلیک نمی‌شود */
   z-index: 999999999999;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.2s ease;
 }

 .line-skew {
   width: 2px;
   height: 30px;
   background-color: black;
   transform: rotate(45deg);
   /* خط مورب */
   transition: all 0.3s ease;
 }

 /* وقتی روی المان خاصی رفت */
 .custom-cursor.active .line-skew {
   transform: rotate(90deg) scale(1.5);
   /* حالت تکان خوردن یا تغییر شکل */

 }

 a {
   color: #000;
   text-decoration: none;
   outline: unset;
 }

 ul {
   list-style-type: none;
   outline: unset;
 }

 .font-24 {
   font-size: 24px;
 }

 /* HEADER */



 .logo {
   display: flex;
 }

 .nav-icons {
   display: flex;
   align-items: center;
   gap: 24px;
 }

 .menu-icon,
 .lang-switch {
   font-size: 20px;
   cursor: pointer;
 }

 /* SECTIONS */
 .main-1300,
 .main1-1300 {
   width: 1300px;
   margin: 0 auto;
 }

 section {
   width: 100%;
 }

 .section-title1 {
       display: flex;
    justify-content: space-between;
    margin: 0;
    position: absolute;
    right: unset;
    bottom: 0px;
    overflow: hidden;
    flex-direction: column;
    width: 40%;
    left: 0;
    text-align: right;
    z-index: 100;

 }

 .section-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 24px;
   font-weight: bold;
   margin: 0;
   margin-bottom: 24px;
 }

 .title-p {
   font-size: 24px;
   font-weight: bold;
   position: relative;
   display: flex
 }

 /* IMAGE BLOCK */
 .img-box {
   width: 100%;
   height: auto;
   margin-bottom: 12px;
 }

 .img-box img {
   width: 100%;
   height: auto;
 }

 /* TEXT */
 .m-l-5 {
   margin-left: 5px;
 }

 .learn-more {
   margin-top: 14px;
   display: inline-block;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 5px;
 }

 /* PROJECT ITEM */
 .project-item {
   margin-bottom: 12px;
 }

 .project-title {
   font-size: 16px;
   color: #000;
   
    text-align: right;
    direction: rtl;
 }

 /* FOOTER */
 footer {
   padding: 20px 0;
   font-size: 15px;
   margin: 0 auto;
   margin-top: 60px;
   border-bottom: 1px solid rgba(163, 163, 163, 1);
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
   background-color: #fff;
    flex-direction: row-reverse;
 }

 footer .footer-line {
   margin-bottom: 12px;
   font-weight: bold;
   font-size: 14px;
   display: flex;
   align-items: end;
   gap: 4px;
   direction: rtl;
 }

 footer .footer-label {
   font-weight: 250;
   font-size: 14px;
   margin-right: 8px;
 }

 footer .socials {
   display: flex;
   gap: 12px;
   margin-top: 8px;
 }

 footer .socials img {
   width: 22px;
 }

 /* BOTTOM BAR */
 .bottom-credit {
   text-align: center;
   padding: 20px 0;
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 0 auto;
 }

 .bottom-credit div {
   font-size: 16px;
   color: rgba(147, 149, 152, 1);
   font-weight: 700;

 }


 .section-wrapper {
   position: relative;
   width: 100%;
   margin: auto;
   overflow: hidden;
   margin-bottom: 33px;
   margin-top: 57px;
 }
 .main-section-services  .section-wrapper {
   direction: rtl;text-align: right;
 }

 .section-wrapper img {
   width: 100%;
   display: block;
 }

 .triangle-overlay {
   position: absolute;
  
   height: 101%;
 
    inset: 0;
    width: 90%;
    height: 101%;
    background: #fff;
    /* clip-path: polygon(100% 100%, 23% 100%, 100% -117%); */
      clip-path: polygon(0 0, 0% 233%, 74% 0, 0% -18%)

}

 .mrg-d {
   margin-top: 32px;
   margin-bottom: 24px;
 }

 .diagonal-line {
    position: absolute;
    top: 0;
    right: 29%;
    width: 85%;
    height: 1px;
    background: #000;
    transform: rotate(-51deg);
    transform-origin: right bottom;
 }

 .diagonal-line2 {
   position: absolute;
   bottom: 23px;
   right: 23px;
   width: 32px;
   height: 1px;
   background: #000;
   transform: rotate(-43.5deg);
   transform-origin: right bottom;
 }


 .section-title-left {
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 24px;
   font-weight: bold;
   margin: 0;
   position: absolute;
   left: 0;
   top: -8px;
   overflow: hidden;
 }

 .triangle-overlay-left {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 101%;
   background: #fff;
   clip-path: polygon(0% 0%, 67% 0%, 0% 100%);
 }

 .diagonal-line-left {
   position: absolute;
   top: 0;
   left: 212px;
   width: 85%;
   height: 1px;
   background: #000;
   transform: rotate(137.5deg);
   transform-origin: left bottom;

 }

 .diagonal-line2-left {
   position: absolute;
   top: 3px;
   left: 92px;
   width: 32px;
   height: 1px;
   background: #000;
   transform: rotate(-43.5deg);
   transform-origin: right bottom;
 }




 .diagonal-line2-2 {
   position: absolute;
   bottom: 25px;
   right: -37px;
   width: 32px;
   height: 1px;
   background: #000;
   transform: rotate(-43.5deg);
   transform-origin: right bottom;
   flex: 1 1 auto;
 }

 .reveal-text {
   overflow: hidden;
   text-align: justify;
 }

 .reveal-text span {
   display: inline-block;
   transform: translateX(40px);
   opacity: 0;
   white-space: pre;
 }

 .split-text span {
   white-space: pre;
   display: inline-block;

 }

 .overflow {
   overflow: hidden;
   flex: 0 0 auto;
   width: fit-content;
 }

 .projects-section {
   width: 100%;
   overflow: hidden;
 }

 .projects-scroll {
   display: flex;
   gap: 24px;
   overflow-x: auto;
   overflow-y: hidden;
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   flex-wrap: wrap;
   align-items: flex-start;
   width: 100%;
   
    flex-direction: row-reverse;
    
    
    justify-content: end;
    margin-right: 30px;
 }

 .horizontal-projects::-webkit-scrollbar {
   display: none;
   /* Chrome / Safari */
 }

 .project-item {
   width: 335px;
   scroll-snap-align: start;
   font-size: 20px;
 }

 .project-page .project-item {
   flex: 0 0 auto;
   width: auto;
 }

 .project-item img {
   /* width: auto !important; */
   display: block;
 }

 .menu-icon {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: end;
   width: 34px;
   /* یا هر عرض دلخواه */
   height: 20px;
   /* ارتفاع کل سه خط */
   cursor: pointer;
   position: relative;
   /* برای اینکه خط‌ها درست وسط قرار بگیرند */
 }

 .menu-icon .bar {
   width: 100%;
   height: 1px;
   /* ضخامت هر خط */
   background-color: black;
   /* یا هر رنگ دلخواه */
   transition: all 0.3s ease-in-out;
   /* برای انیمیشن‌های بعدی */
 }

 .width-small {
   width: 25px !important;
 }


 .projects-section {
   position: relative;
 }

 .project-card {
   opacity: 0;
   visibility: hidden;
   transform: translateY(140px);
   transform-origin: bottom;
   will-change: transform, opacity;

 }

 .image-wrap {
   overflow: hidden;
 }

 .image-wrap img {
   width: 100%;
   display: block;
   transform-origin: bottom;
   will-change: transform;
  
 }
.teamWrapper  .image-wrap img { height: 324px;}
 .project-info {
   opacity: 0;
   transform: translateY(20px);
 }

 .project-image {
   overflow: hidden;
   width: 56%;

 }

 .project-image img {
   width: 100%;
   display: block;
   padding: 1px;
 }

 .full-menu {
   position: fixed;
   top: 0;
   right: 0;
   width: 100%;
   align-items: center;
   height: 100vh;
   z-index: 999999;
   display: flex;
   flex-direction: column;
   padding: 32px 32px 84px;
   transform: translateX(100%);
   overflow: scroll;
   overflow-x: hidden;
   background: url(../images/logoblack1.png);
   background-color: #fff;
   background-repeat: no-repeat;
   background-position: center;
 }

 /* هدر منو */
 .menu-header {
   display: flex;
   align-items: center;
 }

 /* 
 .logo {
   height: 28px;
   object-fit: contain;
 } */

 .close-icon {
   font-size: 28px;
   line-height: 1;
   border: none;
   background: transparent;
   cursor: pointer;
 }

 /* لینک‌ها */
 .menu-links {
   list-style: none;
   /* margin: 48px 0 32px; */
   padding: 0;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100vh;
 }

 .menu-links li {
   margin: 0 0 27px;
 }

 .border-menu {
   width: 150px;
   height: 1px;
   background-color: #000;
   position: absolute;
   transform: rotate(-43deg);
   left: 95px;
   top: 106px;
 }

 .menu-links a {
   text-decoration: none;
   color: #000;
   font-size: 24px;
   transition: letter-spacing 0.5s cubic-bezier(0.4, 0, 0.2, 1),
     color 0.3s ease;
 }

 .phon-num:hover,
 .footer-line:hover,
 .footer-line:hover a {
   color: rgba(0, 63, 32, 1);
 }

 .menu-links a:hover {
   color: rgba(0, 63, 32, 1);
   letter-spacing: 45%;
 }

 .font-32 {
   font-size: 32px;
 }

 /* فوتر */
 .menu-footer {
   margin-top: auto;
   font-size: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 16px;
   color: rgba(131, 131, 131, 1);
   width: 100%;
   justify-content: space-between;
 }

 .menu-footer div,
 .menu-footer a {

   font-size: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 16px;
   color: rgba(131, 131, 131, 1);
 }

 .menu-footer .socials {
   display: flex
 }

 .menu-footer .socials a {
   margin-right: 8px;
   font-size: 14px;
   display: flex
 }

 /* اختیاری: بک‌دراپ نیم‌شفاف پشت منو */
 .menu-backdrop {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.25);
   backdrop-filter: blur(4px);
   opacity: 0;
   pointer-events: none;
   z-index: 1999;
 }

 .close-div {
   width: 100%;
   text-align: right;
   margin-bottom: 20px;
 }

 .page-list .projects-scroll {
   flex-wrap: wrap;
 }

 .page-list .projects-section {
   padding: 0;
   padding-left: 0;
   margin-bottom: 100px;direction: rtl;
 }
.CallToActionInner img{
  width: 100%;
  height: auto;
}
 #page-loader {
   position: fixed;
   inset: 0;
   background: #fff;
   /* اگر سایتت تیره است #000 بگذار */
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 99999999;
   transition: opacity .6s cubic-bezier(.22, 1, .36, 1), visibility .6s;
 }

 #page-loader img {
   width: 25%;
   /* سایز گیف */
   height: auto;
 }

 /* وقتی صفحه لود شد */
 #page-loader.hide {
   opacity: 0;
   visibility: hidden;
 }

 .Navigation {
   margin-bottom: 40px; direction: rtl;
 }

 .Navigation a {
   color: rgba(131, 131, 131, 1);
   font-size: 14px;
 }

 .main-project-list {
   display: flex;
   align-items: flex-start;
   gap: 62px;
   margin-top: 44px;
    flex-direction: row-reverse;
 }

 .catgory-project {
   display: flex;
   gap: 12px;
   /* overflow-x: auto;
   overflow-y: hidden; */
   scroll-snap-type: x mandatory;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   margin: 3px 0 27px;
   width: 150px !important;
   flex-wrap: wrap;
   position: sticky;
   top: 15px;
   align-self: flex-start;
   z-index: 2;
 }

 .cat-item {
   scroll-snap-align: start;
   display: flex;
   gap: 12px;
   align-items: center;
   /* justify-content: center; */
   color: #838383;
   width: 140px;
   margin-bottom: 28px;
   font-size: 14px;
   
    direction: rtl;
 }
.main-project-list  .pin-spacer{
  margin-right: 20px;
}
 .cat-item:hover {
   color: #000;
 }

 .cat-item:hover img {
   filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(740%) hue-rotate(114deg) brightness(92%) contrast(105%);
 }

 .line-wrapper {
   position: absolute;
   width: 2px;
   height: 105px;
   overflow: hidden;
   right: 0;
   left: 0;
   bottom: 30px;
   margin: 0 auto;
 }

 .line-project {
   position: absolute;
   width: 2px;
   height: 100%;
   background: #ffffff;
 }

 .line-progress {
   position: absolute;
   width: 2px;
   height: 32px;
   background: #003F20;
   animation: scrollDown1 2s linear infinite;
 }

 @keyframes scrollDown1 {
   0% {
     transform: translateY(-100%);
   }

   100% {
     transform: translateY(200%);
   }
 }

 .bold {
   font-weight: bold;
 }

 .title-project {
   font-size: 22px;
   color: #ffffff;
   position: absolute;
   bottom: 160px;
   left: 0;
   right: 0;
   margin: 0 auto;
   width: max-content;
   text-align: center;
   width: 430px;
 }

 .image-top-project {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   height: 100vh;
 }

 .withe-menu .search svg,
 .withe-menu .logo img {
   filter: brightness(0) invert(1) !important;
 }

 .withe-menu .menu-icon .bar {
   background-color: #fff;
 }

 .Navigation .color-fff {
   color: #fff !important;
 }

 .withe-menu .lang-switch {
   color: #fff;
   z-index: 99;
   font-weight: normal;
 }

 .withe-menu #search-input {
   background: transparent;
   backdrop-filter: blur(10px);
   border: none;
   height: 48px;
   width: 100%;
   font-size: 20px;
   outline: none;
   z-index: 999;
   position: relative;
 }

 .withe-menu .line {
   background: #fff;
 }

 .withe-menu .x-line {
   background: #fff;
 }

 .image-top-project .Navigation {
   margin-bottom: 40px;
   /* padding: 0 20px; */
 }

 .title-project .word,
 .title-project .char {
   display: inline;
   /* یا inline-block برای char */
   white-space: normal !important;
 }

 .info {
   font-size: 24px;
   font-weight: bold;
   margin-top: 152px;
   margin-bottom: 12px;
 }

 .skema-project li {
   display: flex;
   gap: 10px;
   font-size: 18px;
   margin-bottom: 5px;
 }

 .skema-project {
   min-width: 334px;
   margin-bottom: 24px;
 }

 .video-wrapper {
   position: relative;
   width: 100%;
   overflow: hidden;
   margin-bottom: 24px;
 }

 video {
   width: 100%;
   display: block;
 }

 /* دکمه پلی */
 .play-btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 70px;
   height: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   transition: opacity 0.4s ease;
 }

 .play-btn .icon {
   font-size: 53px;
   color: #fff;
   transition: transform 0.3s ease;
 }

 .play-btn.hide {
   opacity: 0;
   pointer-events: none;
 }

 .des-proj {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 12px;
 }

 .project-nav {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 35px;
   gap: 368px;

 }

 .nav-btn {
   background: none;
   border: none;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 24px;
   font-family: inherit;
   font-size: 24px;
   color: #A3A3A3;
   transition: opacity 0.3s;

 }

 .nav-btn .icon {
   width: 42px;
   height: 42px;
   border: 1px solid;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 5px;
   font-size: 20px;
 }

 .nav-btn:hover {
   color: rgba(14, 111, 59, 1);
 }

 /* خط عمودی وسط */
 .divider {
   width: 1px;
   height: 30px;
   /* ارتفاع خط وسط */
   background-color: #ccc;
   margin: 0 10px;
 }

 .project-page footer {
   margin-top: 10px !important;
 }

 .popup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.95);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   visibility: hidden;
   /* مخفی در ابتدا */
   opacity: 0;
 }

 .popup img {
   max-width: 100%;
   max-height: 98%;
 }

 .nav-arrow {
   position: absolute;
   top: 50%;
   font-size: 30px;
   cursor: pointer;
   border: none;
   background: none;
 }

 .prev-arrow {
   left: 20px;
 }

 .next-arrow {
   right: 20px;
 }

 .close-btn {
   position: absolute;
   top: 20px;
   right: 20px;
   font-size: 40px;
   cursor: pointer;
   border: none;
   background: none;
 }

 /* service */
 .accordion-list {
   max-width: 700px;
   margin: 33px auto 0;
   border: 1px solid rgba(163, 163, 163, 1);
   border-radius: 4px;
   overflow: hidden;
   font-family: Inter, sans-serif;
   border-bottom: none;
 }

 .toggle-js {
   display: flex;
 }

 .accordion-block {
   border-bottom: 1px solid rgba(163, 163, 163, 1);

 }

 .block-head {
   display: flex;
   align-items: flex-start;
   padding: 18px 12px;
   cursor: pointer;
   flex-direction: column;
   width: calc(100% - 54px);
 }

 .num {
   font-size: 16px;
   color: #000;
   font-weight: bold;
 }

 .title {
   flex: 1;
   font-size: 15px;
   color: #111;
   margin: 0;
 }

 .chevron {
   width: 9px;
   height: 9px;
   border-right: 1px solid #333;
   border-bottom: 1px solid #333;
   transform: rotate(45deg);
   transition: transform .25s ease;
 }

 /* content */

 .block-content {
   height: 70px;
   overflow: hidden;
   transition: height .45s cubic-bezier(.4, 0, .2, 1);
   text-align: justify;
 }

 .block-content p {
   margin: 0;
   font-size: 14px;
   color: #000;
 }

 .block-content img {
   width: 100%;
   margin-top: 15px;
 }

 .toggle-btn {
   border: none;
   background: transparent;
   cursor: pointer;
   padding: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 54px;
   border-left: 1px solid rgba(163, 163, 163, 1);
 }

 .chevron {
   width: 8px;
   height: 8px;
   border-right: 1.5px solid #222;
   border-bottom: 1.5px solid #222;
   transform: rotate(45deg);
   transition: transform .3s ease;
 }

 .accordion-block.active .chevron {
   transform: rotate(-135deg);
 }

 .font-18 {
   font-size: 18px;
 }

 .font-14 {
   font-size: 14px;
 }

 .sercive-page .Navigation {
   margin-bottom: 0;
   /* padding: 0 20px; */
 }

 /* article-list */
 .meta-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: auto;
   height: 24px;
   margin: 8px 0;
 }

 .date {
   font-size: 14px;
   color: #000;
   font-weight: 500;
   backface-visibility: hidden;
 }

 .description-article {
   font-size: 14px;
 }

 .share-btn {
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   color: #000;
   display: flex;
   align-items: center;
 }

 .share-btn:active {
   opacity: 0.6;
 }

 .article-title {
   font-size: 18px;
   font-weight: 500;
   backface-visibility: hidden;
 }

 .learn-more-a {
   display: inline-flex;
   align-items: center;
   font-size: 16px;
   color: #111;
   text-decoration: none;
   gap: 10px;
 }

 .learn-more-a::before {
   content: "";
   width: 48px;
   height: 1px;
   background: #111;
   transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
 }

 /* حالت هاور */
 .learn-more-a:hover::before {
   width: 62px;
   /* طول خط در حالت هاور چقدر شود؟ */
   background: #003F20;
 }

 /* اختیاری: اگر می‌خواهید خود متن هم کمی جابجا یا پررنگ شود */
 .learn-more-a:hover {
   color: #003F20;
 }

 .border-item {
   border: 1px solid rgba(163, 163, 163, 1);
   padding: 11px;
   margin-bottom: 38px;
 }

 .blog-page .Navigation {
   margin-bottom: 24px;
 }


 .blog-page .project-item {
   margin-bottom: 12px;
 }



 .blog-page .section-title {
   margin-top: 30px;
 }

 .color-4d {
   color: #4d4d4d;
 }

 /* about-us */

 .about-page {
   margin: 0 auto;

 }

 /* HERO */


 .hero-image {
   display: block;
   width: 100%;
   height: auto;
 }

 /* breadcrumb */
 .breadcrumb {
   padding: 8px 16px;
   font-size: 11px;
   color: #999;
 }

 /* generic section */
 .section {
   padding: 20px 16px;

 }

 .section-title {
   font-size: 24px;
   font-weight: 500;
   margin: 0 0 32px;
   font-weight: bold;direction: rtl;
 }

 .project-list-page  .section-title {
   direction: rtl;
 }
 .section-text {
   font-size: 16px;
   margin: 0;
   color: #000;
   text-align: justify;
   
    direction: rtl;
 }

 /* --- WHY SECTION --- */
 .section-why {
   margin-top: 120px !important;
   display: flex;
   align-items: flex-start;
   position: relative;
   overflow: hidden;
   padding: 0 16px;
   margin-bottom: 140px !important;
 }

 .section-why .section-title {
   width: 100%;direction: ltr;
 }

 .line-a {
   display: flex;
   justify-content: end;
 }

 .section-why .div-why {
   display: flex;
   flex-direction: column;
   gap: 40px;
 }

 .div-why div:nth-child(2) {
   margin-left: -71px;
 }

 .div-why div:nth-child(3) {
   margin-left: -175px;
 }

 .section-why .diagonal-line {
   position: absolute;
   top: -37px;
   right: 71%;
   width: 77%;
   height: 1px;
   background: #000;
   transform: rotate(-46.5deg);
   transform-origin: right bottom;
 }

 /* --- FOUNDERS --- */
 .section-founders .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;direction: rtl;
 }

 .section-divider {
   flex: 1;
   margin-left: 8px;
   height: 1px;
   background: #cfcfcf;
 }

 .founders-list {
   display: flex;
   gap: 160px;
   margin-bottom: 80px
 }

 .person-card {
   display: flex;
   align-items: flex-end;
   gap: 12px;
   width: 50%;
 }

 .person-card-2 {
   width: 50%;
 }

 .person-card-2 .person-card {
   width: 100%;
 }

 .w-235 {
   width: 405px !important;
 }

 .person-image-wrap {
   flex-shrink: 0;
   background: #f1f1f1;
 }

 .person-image {
   display: block;
   width: 100%;
   height: auto;
 }
 .person-image.w-235 {
   width: 364px !important;
 }
 .person-info {
   flex: 1;
 }

 .person-name {
   font-size: 16px;
   font-weight: bold;
   margin: 0 0 25px;
 }

 .person-role {
   font-size: 15px;
   /* line-height: 1.6; */
   color: #000;
   margin: 0;
   text-align: left;

 }

 .section-partners {
   margin-bottom: 100px !important;
 }

 /* --- OUR TEAM (GREEN BG) --- */
 .section-team {
   background: linear-gradient(#003f20 0, #003f20 275px, transparent 275px);
   color: #ffffff;
   padding: 20px;

 }

 .team-header .section-title {
   color: #ffffff;direction: rtl;
 }

 .team-grid {
   display: flex;
   justify-content: center;
   margin-top: 24px;
   align-items: center;
   gap: 20px;
   width: max-content;
 }

 .team-card {
   color: #111;
   border-radius: 2px;
   flex-shrink: 0;
 }

 .drag-scroll {
   overflow-x: auto;
   overflow-y: hidden;
 }

 .track {
   display: flex;
   flex-wrap: nowrap;
   width: max-content;
   gap: 42px;
 }

 .team-image-wrap {
   width: 100%;
 }

 .team-image {
   display: block;
   width: 100%;
   height: auto;
 }

 .team-meta {
   margin-top: 12px;
   margin-bottom: 25px;
 }

 .team-name {
   margin: 0 0 8px;
   font-size: 16px;
   font-weight: 600;
 }

 .team-role {
   margin: 0;
   font-size: 16px;
   color: #777;
 }

 .popup-content {
   text-align: center;
   max-width: 80%;
 }

 .popup-caption {
   margin-top: 15px;
 }

 #popup-img {
   object-fit: contain;
   /* max-width: unset;
    max-height: none; */
 }

 /* --- HISTORY --- */
 .section-history {
   display: flex;
   align-items: flex-start;
   position: relative;
   overflow: hidden;
   padding: 0 16px;
   margin-bottom: 140px !important;
   margin-top: 80px !important;
 }

 .section-history .section-title {
   width: 100%;
 }


 .section-history .div-why {
   display: flex;
   flex-direction: column;
   gap: 40px;
   width: 79%;
 }

 .section-history .diagonal-line {
   position: absolute;
   top: -37px;
   right: 62%;
   width: 77%;
   height: 1px;
   background: #000;
   transform: rotate(-46.5deg);
   transform-origin: right bottom;
 }

 .history-accordion {
   margin-top: 18px;
   border: 1px solid #a3a3a3;
   border-radius: 2px;
   overflow: hidden;
 }

 .history-item+.history-item {
   border-top: 1px solid #a3a3a3;
 }

 .history-header {
   width: 100%;
   padding: 0 18px 0 14px;
   border: none;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
   height: 68px;
 }

 .history-title {
   font-size: 16px;
   text-transform: lowercase;
   color: #333;
   font-weight: bold;
 }

 /* آیکن هشتی */
 .history-icon {
   width: 10px;
   height: 10px;
   border-right: 1px solid #333;
   border-bottom: 1px solid #333;
   transform: rotate(45deg);
   transition: transform 0.25s ease;
 }

 .history-item.active .history-icon {
   transform: rotate(-135deg);
 }

 /* محتوا - slide down */
 .history-content {
   height: 0;
   overflow: hidden;

   padding: 0 12px;
   transition: height 0.35s cubic-bezier(.25, .46, .45, .94);
 }

 .history-content p {
   margin: 0;
   padding: 10px 0 12px;
   font-size: 12px;
   line-height: 1.7;
   color: #555;
 }

 /* --- CERTIFICATES --- */
 .section-certificates {
   padding: 10px 0 35px 20px;
   background: linear-gradient(#e4e4e5 0, #e4e4e5 289px, transparent 289px);
   margin-bottom: 120px;

 }

 .section-certificates .section-title {
   margin-top: 43px;
   margin-bottom: 40px;direction: rtl;
 }

 .cert-list {
   margin-top: 10px;
   display: flex;
   gap: 12px;
   overflow-x: auto;
   padding-bottom: 4px;
 }

 .cert-card {
   min-width: 130px;
   background: #f7f7f7;
   border-radius: 2px;
   padding: 6px;
 }

 .cert-image-wrap {
   width: 100%;
   background: #eaeaea;
 }

 .cert-image {
   display: block;
   width: 100%;
   height: auto;
 }

 .cert-caption {
   font-size: 11px;
   margin: 4px 0 0;
   color: #444;
 }

 /* --- PARTNERS --- */
 .section-partners .section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .partners-grid {
   margin-top: 10px;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
 }

 .partner-logo {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .partner-logo img {
   max-width: 100%;
   height: auto;
 }

 /* --- CONTACT MINI --- */
 .section-contact-mini {

   border-top: 1px solid #e5e5e5;
 }

 .contact-text {
   margin: 0;
   padding: 14px 16px 20px;
   font-size: 11px;
   line-height: 1.7;
   color: #666;
 }



 .hero-section {
   padding: 10px 20px 0;
   margin-top: 12px;
 }

 .title-about-1 {
   font-size: 24px;
   font-weight: bold;
 }



 .section-team .diagonal-line2-2 {
   background: #fff;
 }

 .section-about {
   margin-top: 100px !important;
 }

 .section-history .section-title {
   margin: 0 0 24px;
   direction: ltr;
 }

 .section-with-overlay {
   background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(../images/accordionback.jpg);
   background-size: cover;
   background-position: center;
   padding: 150px 20px;
   margin-top: 20px;
   margin-bottom: 120px;
 }

 .about-page .block-content {
   height: 0;
 }

 .about-page .block-content .title {
   /* flex: 1; */
   font-size: 16px;
   color: #111;
   font-weight: bold;
 }

 .about-page .toggle-js {
   min-height: 68px;
 }

 .about-page .project-item {
   flex: 0 0 auto;
   scroll-snap-align: start;
   font-size: 20px;
 }

 .title-gallery-about {
   font-size: 16px;
   font-weight: bold;
   margin-top: 12px;
 }

 .middel-img img {
   width: 100%;
 }

 .section-partners .section-title {
   margin-top: 40px;
   margin-bottom: 24px;
   direction: rtl;
 }

 /* blog */
 .blog-page .top-description .meta-bar {
   margin: 24px 0;
 }

 .blog-page .top-description .article-title {
   margin-top: 7px;
 }

 .blog-page .top-description .project-item {
   margin-bottom: 32px;
 }

 .blog-page .middel-img {
   margin-bottom: 24px;
 }

 .blog-page .section-why {
   margin-top: auto !important;
   align-items: center;
   gap: 60px;
   margin-bottom: 0 !important;
 }

 .blog-page .section-certificates {
   background: unset;
   margin-bottom: 0;
 }

 .blog-page .video-wrapper {
   margin-bottom: 0;
 }

 .blog-page .description-article {
   font-size: 16px;
   text-align: justify;
   backface-visibility: hidden;
 }

 .gallery-image-color {
   filter: grayscale(100%);
   transition: filter 0.5s ease;
 }
.main-project-list  .gallery-image-color {
   filter: unset !important;
 }
 .teamWrapper  .gallery-image-color {
   filter: unset !important;
 }
 .gallery-image-color:hover {
   filter: grayscale(0%);
 }

 .gallery-image-zoom {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: grayscale(100%);
   transform: scale(1) !important;
   transition: transform 2s ease-out, filter 1.5s ease-in-out !important;
   will-change: transform, filter;
 }

 .gallery-image-zoom:hover {
   filter: grayscale(0%);
   transform: scale(1.15) !important;
   transition: transform 6s ease-in-out, filter 1s ease-in-out !important;
 }

 .gallery-image-zoom-b {
   display: block;
   width: 100%;
   height: auto;
   transform-origin: center center;
   /* تا به چپ نچسبه */
   will-change: transform, filter;

 }





 /* quote */

 .quote-banner {
   position: relative;
   overflow: hidden;
 }

 .quote-banner-img {
   position: absolute;
   inset: 0;
   clip-path: inset(100% 0 0 0);
 }

 .quote-banner-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.35);
   transform: scale(1.1) translateY(40px);
 }

 .quote-banner-content {
   position: relative;
   z-index: 2;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 22px;
 }

 .quote-tabs {
   display: flex;
   flex-direction: column;
   margin-bottom: 2.5rem;
   align-items: flex-start;
   border-left: 1px solid #003F20;
   padding-left: 28px;
   width: 240px;direction: rtl;
 }

 .quote-tab {
   display: flex;
   align-items: center;
   font-size: 18px;
   cursor: pointer;
   transition: color .3s;
   font-weight: 600;
 }

 .quote-tab.active {
   color: #003f20;
 }



 .quote-main {
   font-size: 18px;
   overflow: hidden;
   border: 1px dashed #BEBEBE;
   padding: 67.5px 103px;
   text-align: center;
   width: 100%;
   direction: rtl;
 }

 .quote-main p {
   text-align: center;
 }

 .quote-main span {
   display: inline-block;
 }

 .quote-1 {
   margin-bottom: 31px;
 }

 .quote-2 {
   margin-top: 31px;
 }

 .gap-69 {
   display: flex;
   flex-direction: column;
   gap: 69px;
 }

 .project-data-section {
   display: flex;
   align-items: flex-start;
   gap: 33px;direction: rtl;
 }

 .right-project-data {
  border-right: 1px solid #A3A3A3;
    padding-top: 152px;
    padding-right: 32px;
    overflow-x: hidden;
    position: relative;
    width: 1300px;
 }

 .skema-project ul li div {
   color: rgba(109, 110, 113, 1)
 }

 .project-data-section .description-project {
   margin-bottom: 68px;
 }

 .description-project2 {
   margin-top: 68px;
   margin-bottom: 100px;
 }

 .skema-project {
   position: sticky;
   top: -115px;
   align-self: flex-start;
   z-index: 2;
 }

 .image-top-project {
   position: relative;
   overflow: hidden;
   /* برای اینکه زوم بیرون نزنه */
 }

 /* لایه بک‌گراند جدا */
 .image-top-project::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;

   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--hero-bg);
   /* یا مستقیم url */
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

   transform: scale(1.2);
   transform-origin: center;
   will-change: transform;
   transition: transform 4s cubic-bezier(.16, 1, .3, 1);
 }

 /* وقتی لود شد فقط بک‌گراند زوم‌اوت میشه */
 .image-top-project.is-loaded::before {
   transform: scale(1);
 }

 .event-page .video-wrapper {
   margin-bottom: 68px;
 }

 .home-page .certWrapper .project-card,
 .page-list .certWrapper .project-card {
   width: 414px;
   transform-origin: center center;
   transition: transform 0.35s cubic-bezier(.16, 1, .3, 1);
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px 0;


 }

 .home-page .certWrapper .project-card .img-box,
 .page-list .certWrapper .project-card .img-box {
   width: 329px;
   position: relative;
   transform: scale(1);
   transform-origin: center center !important;
   transition: transform 0.8s cubic-bezier(.16, 1, .3, 1);
   will-change: transform;
   text-align: justify;

 }

 .home-page .certWrapper .projects-scroll,
 .page-list .certWrapper .projects-scroll {
   gap: 8px !important;
 }

 .page-list .img-box {
   width: auto;
 }

 .page-list .first-item {
   width: 100%;
   display: flex;
   flex-direction: row-reverse;
   padding: 62px 55px 48px;
   gap: 55px;
   justify-content: space-between;
   align-items: center;
   margin-top: 26px;
 }

 .page-list .first-item .project-info {
   display: flex;
   flex-direction: column;
   gap: 35px;
   direction: rtl;
 }

 .page-list .section-title {
   margin: 70px 0 37px !important;
 }

 .blog-card {
   position: relative;
   overflow: hidden;
   background: #fff;
   --top-bottom-size: 0%;
   --left-right-size: 0%;
   transition: --top-bottom-size 0.8s ease, --left-right-size 0.4s ease;
 }

 .blog-card::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 3;
   background:
     linear-gradient(#a3a3a3, #a3a3a3) top left / var(--top-bottom-size) 1px no-repeat,
     linear-gradient(#a3a3a3, #a3a3a3) bottom right / var(--top-bottom-size) 1px no-repeat;
   transition: background-size 0.8s cubic-bezier(0.25, 1, 0.5, 1);
 }

 .blog-card::after {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   z-index: 3;
   background:
     linear-gradient(#a3a3a3, #a3a3a3) top right / 1px var(--left-right-size) no-repeat,
     linear-gradient(#a3a3a3, #a3a3a3) bottom left / 1px var(--left-right-size) no-repeat;
   transition: background-size 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
 }

 .blog-card .img-box {
   width: 100%;
   overflow: hidden;
 }

 .blog-card .img-box img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   transform: scale(1);
   transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
   will-change: transform;
   margin-bottom: 24px;
 }

 .blog-card:hover {
   --top-bottom-size: 100%;
   --left-right-size: 100%;
 }

 .blog-card:hover .img-box {
   transform: scale(1.05) !important;
 }

 .p404-page {
   background: url(../images/404img.jpg);
   height: 100vh;
   text-align: center;
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
 }

 .p404-page .learn-more {
   justify-content: space-evenly;
 }

 .p404-s {
   display: flex;
   flex-direction: column;
   gap: 35px;
   width: 719px;

 }

 .p404 {
   display: flex;
   justify-content: end;
 }

 .title-404 {
   font-size: 250px;
   font-weight: bold;
   font-family: "sahel";
   line-height: 1;
 }

 /* home page */

 .home-page header,
 .home-page footer {
   /* مقادیر پیش‌فرض */
   padding-left: var(--sidebar-left-width, 0px);
   padding-right: var(--sidebar-right-width, 0px);
   transition: padding 0.1s ease;
   /* برای روانی بیشتر */
 }




 .home-page .container {
   display: flex;
   width: 100vw;
   min-height: calc(100vh - 126px);
 }

 .home-page .panel {
   position: relative;
   display: flex;
   width: 46px;
   /* عرض پیش‌فرض سایدبار */
   background: #fff;
   overflow: hidden;
 }

 .footer {
   width: 1300px;
   margin: 0 auto;
 }

 .services-page .footer {
   margin-top: 60px;
 }

 .main-headerr {
   padding-top: 45px;
   padding-bottom: 14px;
   display: flex;
   justify-content: space-between;
   font-weight: bold;
   margin: 0 auto;
 }

 .home-page .bottom-credit,
 .home-page footer {
   padding-top: 20px;
   padding-bottom: 20px;
   width: 100%;
 }

 .home-page .panel.active {
   width: auto;
 }

 .home-page .sidebar {
   width: 42px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   writing-mode: vertical-rl;
   transform: rotate(180deg);

   font-weight: bold;
   z-index: 10;

 }

 .home-page .is-right .sidebar:hover,
 .home-page .is-left .sidebar:hover {
   background: #003F20;
   color: #fff;
   width: 42px
 }

 /* مخفی شدن سایدبار در پنل فعال */
 .home-page .panel.active .sidebar {
   opacity: 0;
   pointer-events: none;
 }

 .home-page .content {
   width: 100vw;
   overflow-y: auto;
   opacity: 0;
   /* برای انیمیشن ظاهر شدن محتوا */
   scrollbar-width: none;

 }

 .home-page #p1 .content,
 .home-page #p4 .content {
   display: flex;
   align-items: center;
 }



 .home-page .panel.active .content {
   pointer-events: auto;
   /* وقتی فعال شد اجازه کلیک بده */
 }

 .home-page .content::-webkit-scrollbar {
   display: none;
 }

 .home-page .panel.active .content {
   opacity: 1;
 }



 .home-page .main-section-services {
   width: calc(100% - 138px);
   margin: 0 auto;
   /* margin-bottom: 100px; */
       text-align: right;
    direction: rtl;
 }

 /* ساختار صفحه */
 .home-page .sidebar {
   position: fixed;
   top: 0;
   bottom: 0;
   width: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 9;
   background: #fff;
   writing-mode: vertical-rl;
   text-orientation: mixed;
   font-size: 16px;
   text-transform: uppercase;
 }
 .search-list  .certWrapper{
  direction: rtl;
 }

 .home-page .is-left .sidebar {
   border-left: 1px solid #a3a3a3;
 }

 .home-page .is-right .sidebar {
   border-right: 1px solid #a3a3a3;
 }

 .home-page .left {
   left: 0;
 }

 .home-page .right {
   right: 0;
 }




 .home-page .main-container {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   /* padding: 0 100px; */
   border: 1px solid #A3A3A3;

 }

 .home-page .tabs {
   display: flex;
   /* gap: 40px; */
   margin-bottom: 42px;
   height: 72px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   text-align: center;
 }

 .home-page .tab-btn {
   cursor: pointer;
   color: #aaa;
   transition: 0.3s;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   border-right: 1px solid #a3a3a3;
   border-bottom: 1px solid #a3a3a3;
   flex-direction: column;
 }

 .home-page .tab-btn:last-child {
   border-right: unset;
 }

 .home-page .tab-btn.active {
   color: #fff;
   background-color: #003F20;
 }

 .home-page .tab-btn:hover {
   color: #fff;
   background-color: #003F20;
 }

 .home-page .content-wrap {
   display: none;
   width: 100%;
   align-items: center;
   gap: 80px;
   justify-content: center;
   text-align: justify;
   padding: 0 50px 60px;
 }

 .home-page .content-wrap.active {
   display: flex;
 }

 .home-page .img-mask-wrapper {
   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
 }

 .home-page .text-side {
   opacity: 0;
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 .home-page .scroll-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   margin: 54px 0 90px;
 }

 .home-page .arrow {
   width: 15px;
   height: 15px;
   border-right: 2px solid #000;
   border-bottom: 2px solid #000;
   transform: rotate(45deg);
   animation: scrollDown 1.5s infinite;
 }

 .home-page .arrow:nth-child(1) {
   animation-delay: 0s;
 }

 .home-page .arrow:nth-child(2) {
   animation-delay: 0.3s;
 }

 .home-page .arrow:nth-child(3) {
   animation-delay: 0.6s;
 }

 @keyframes scrollDown {
   0% {
     opacity: 0;
     transform: translateY(0) rotate(45deg);
   }

   50% {
     opacity: 1;
   }

   100% {
     opacity: 0;
     transform: translateY(20px) rotate(45deg);
   }
 }


 .home-page .split-text span,
 .home-page .reveal-text span {
   display: inline-block;

 }

 .home-page .main-section-services .reveal-text span {
   display: inline-block;
   position: relative;

 }

 .home-page .panel .content {
   opacity: 0;
   visibility: hidden;
 }


 .home-page .projects-section-def {
   margin-top: 104px;
   padding-right: 20px;
 }

 .projects-section-def {
   margin-bottom: 60px;
 }

 .home-page .section-title-contact {
   flex-direction: column;
   justify-content: flex-start;
   width: 360px;
   align-items: flex-start;
   gap: 40px;
   padding-right: 0 !important;
 }

 .home-page .contact-data-img {
   display: flex;
   align-items: center;
   gap: 24px;
 }

 .home-page .contact-us {
   display: flex;
   width: calc(100vw - 138px);
   justify-content: space-between;
   padding-right: 20px;
   padding-left: 20px;
   padding-top: 162px;
   padding-bottom: 62px;
   position: relative !important;
   overflow: hidden;
   align-items: flex-start;
 }

 .home-page .contact-des {
   font-weight: normal;
   font-size: 16px;
 }

 .home-page .contact-us .footer-line {
   font-size: 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
 }

 .home-page .contact-us .diagonal-line {
   top: 19px;
   right: 46%;
 }

 .home-page .contact-data {
   display: flex;
   flex-direction: column;
   gap: 24px;
   width: 442px;
   direction: rtl;
 }

 .home-page .section-title {
   overflow: hidden;
   
    text-align: right;
    direction: rtl;
    padding-right: 50px;
 }

 .home-page .footer,
 .home-page .main-headerr {
   width: 100%;
   margin: 0 auto;
 }

 .home-page .footer,
 .home-page .main-headerr .logo{
  align-items: center;
  justify-content: center;
  
    height: 57px;
 }
 .home-page .footer,
 .home-page .main-headerr .logo a{

  
    height: 57px;
 }
 .socials svg:hover path {
   stroke: #0e6f3b;
 }

 /* search */
 .search-section {
   display: flex;
   align-items: center;
   gap: 15px;
   visibility: hidden;
   position: absolute;
   right: -15px;
   top: -13px;
 }

 .search-box-container {
   position: relative;
   padding: 8px 15px;
   width: 0;
   /* شروع از صفر */
   overflow: hidden;
   display: flex;
   align-items: center;
   height: 50px;
 }

 .p404-page .search-box-container {
   background-color: #fff;
 }

 /* استایل خطوط حاشیه (مثل قبل) */
 .line {
   position: absolute;
   background: #000;
 }

 .top {
   top: 0;
   left: 0;
   height: 1px;
   width: 0;
 }

 .right {
   top: 0;
   right: 0;
   width: 1px;
   height: 0;
 }

 .bottom {
   bottom: 0;
   right: 0;
   height: 1px;
   width: 0;
 }

 .left {
   bottom: 0;
   left: 0;
   width: 1px;
   height: 0;
 }

 /* دکمه ضربدر */

 .close-btn-search {
   position: absolute;
   width: 25px;
   height: 25px;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   left: -36px;
 }

 .x-line {
   position: absolute;
   width: 1px;
   height: 0;
   /* شروع از صفر برای انیمیشن */
   background: #000;
   transform-origin: center;
   /* تغییر به مرکز برای ضربدر متقارن */
 }

 /* خط اول: کج به راست */
 .x-line:nth-child(1) {
   transform: rotate(45deg);
 }

 /* خط دوم: کج به چپ */
 .x-line:nth-child(2) {
   transform: rotate(-45deg);
 }

 .search {
   position: relative;
 }

 button {
   outline: none;
 }

 #search-input {
   border: none;
   height: 50px;
   width: 100%;
   font-size: 20px;
   outline: none;
 }

 .search-inner {
   width: 100%;
 }

 .search-submit-style {
   border: none;
   background: none;
   position: relative;
   z-index: 99999;
   margin-top: 6px;
 }


 .blog-pages .top-description {
   display: flex;
   align-items: flex-end;
   gap: 60px;
 }

 .blog-pages .blog-page .section-about {
   margin-top: 50px;
 }

 .blog-pages .text-3 {
   margin-top: 48px;
   margin-bottom: 48px;
 }

 .opinion-section {
   padding: 100px 0;
   background: #fff;
 }

 .opinion-wrap {
   width: 100%;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   background: transparent;
   border: none;
   padding: 0;
 }

 .opinion-title {
   margin: 0 0 22px 0;
   font-size: 18px;
   font-weight: 500;
   color: #111;
   border: none;
   padding: 0;
   background: transparent;
 }

 .form-box {
   border: none;
   background: transparent;
   padding: 0;
   min-height: 360px;
   position: relative;
 }

 .field {
   width: 100%;
   display: block;
   border: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.18);
   background: transparent;
   outline: none;
   font-size: 14px;
   color: #111;
   height: 50px;
 }

 .field::placeholder {
   color: rgba(0, 0, 0, 0.55);
 }

 .field-textarea {
   height: 152px;
   resize: none;
   padding-top: 15px;
 }

 .captcha-row {
   display: grid;
   grid-template-columns: 210px 28px 120px;
   gap: 14px;
   align-items: center;
   padding-top: 18px;
   border-bottom: none;
   padding-bottom: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.18);
   width: max-content;
 }

 .field-captcha {
   border-bottom: none;
   padding: 10px 0;
 }

 .learn-more-a::before {
   margin-top: 6px;
 }

 .captcha-refresh {
   width: 28px;
   height: 28px;
   border: none;
   background: transparent;
   cursor: pointer;
   color: rgba(0, 0, 0, 0.55);
   font-size: 22px;
 }

 .captcha-img {
   height: 28px;
   border: none;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   font-weight: 700;
   letter-spacing: 2px;
   color: rgba(0, 0, 0, 0.65);
   user-select: none;
 }

 .btn-submit {
   position: absolute;
   right: 0;
   bottom: 0;

   border: none;
   background: transparent;
   cursor: pointer;

   font-size: 12px;
   color: rgba(0, 0, 0, 0.75);
   text-decoration: none;
   padding-left: 46px;
 }

 .comments-box {
   border: none;
   background: transparent;
   padding: 0;
   min-height: 360px;
   position: relative;
   padding-bottom: 42px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.18);
 }

 .comments-viewport {
   overflow: hidden;
   height: 240px;
   position: relative;
 }

 .comment-name {
   margin: 0 0 14px 0;
   font-size: 16px;
   font-weight: 500;
   color: rgba(0, 0, 0, 0.7);
 }

 .comment-text {
   margin: 0;
   font-size: 16px;
   line-height: 2.0;
   color: rgba(0, 0, 0, 0.55);
 }

 .current {
   color: #000;
 }

 .comments-controls {
   position: absolute;
   left: 0;
   bottom: 8px;

   display: flex;
   align-items: center;
   gap: 10px;
 }

 .nav-btn-blog {
   width: 51px;
   height: 51px;
   border-radius: 999px;
   border: 1px solid rgba(212, 212, 212, 1);
   background: transparent;
   cursor: pointer;
   font-size: 35px;
   line-height: 1;
   color: rgba(0, 0, 0, 0.55);
   padding-bottom: 5px;
 }

 .nav-btn-blog:disabled {
   opacity: 0.35;
   cursor: not-allowed;
 }

 .counter {
   margin-left: 10px;
   font-size: 14px;
   color: rgba(0, 0, 0, 0.55);
   min-width: 64px;
   text-align: left;
   display: flex;
   gap: 3px;
   margin-top: 30px;
 }

 .comments-track {
   position: relative;
   height: 100%;
 }

 .comment-slide {
   position: absolute;
   inset: 0;
   opacity: 0;
   pointer-events: none;
   transform: translateX(18px);
   display: flex;
   flex-direction: column;
   gap: 63px;
   padding-top: 37px;
 }

 .comment-slide.is-active {
   opacity: 1;
   pointer-events: auto;
   transform: translateX(0);
 }

 @media (max-width: 900px) {
   .opinion-wrap {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .captcha-row {
     grid-template-columns: 310px 28px 120px !important;
   }

 }

 @media (max-width: 670px) {
   .btn-submit {
     position: static;
     margin-top: 18px;
     padding-left: 46px;
   }
 }

 .blog-page .section-why,
 .blog-page .section {
   padding: 0;
 }

 .blog-pages .certWrapper .project-card {
   width: 414px;
   transform-origin: center center;
   transition: transform 0.35s cubic-bezier(.16, 1, .3, 1);
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px 0;


 }

 .blog-pages .certWrapper .project-card .img-box {
   width: 329px;
   position: relative;
   transform: scale(1);
   transform-origin: center center !important;
   transition: transform 0.8s cubic-bezier(.16, 1, .3, 1);
   will-change: transform;

 }

 .blog-pages .certWrapper .projects-scroll {
   gap: 8px !important;
 }

 .tabs-wrapper {
   display: flex;
   align-items: stretch;
   position: relative;
   width: 100%;
 }

 .tabs-viewport {
   overflow-x: auto;
   /* اجازه اسکرول می‌دهد */
   scroll-behavior: smooth;
   /* حرکت نرم اسکرول */
   flex-grow: 1;
   scrollbar-width: none;
   /* مخفی کردن اسکرول‌بار در فایرفاکس */
 }

 .tabs-viewport::-webkit-scrollbar {
   display: none;
   /* مخفی کردن اسکرول‌بار در کروم و سافاری */
 }

 .tabs {
   display: flex;
   width: max-content;
   /* خیلی مهم: عرض کانتینر به اندازه تمام تب‌ها باز می‌شود */
 }

 .tab-btn {
   flex: 0 0 30%;
   /* هر تب دقیقا ۲۵٪ عرض را بگیرد (که بشود ۴ تا در هر نما) */
   min-width: 200px;
   /* یا یک عدد ثابت بده که در مانیتورهای کوچک نشکنند */

   padding: 20px;
   text-align: center;
   cursor: pointer;
 }

 /* استایل دکمه‌های ناوبری */


 .tab-nav-btn:hover {
   color: #535353;
 }

 .tab-nav-btn.prev {
   left: 0;
 }

 .tab-nav-btn.next {
   right: 0;
 }

 .tabs-wrapperr {
   width: 100%
 }

 .double-arrow {
   display: flex;
   gap: 4px;
 }

 /* ساختن شکل فلش > */
 .double-arrow span {
   display: block;
   width: 10px;
   height: 10px;
   border-right: 2px solid #000;
   border-bottom: 2px solid #000;
 }

 /* جهت‌دهی برای Next (سمت راست) */
 .next .double-arrow span {
   transform: rotate(-45deg);
 }

 /* جهت‌دهی برای Prev (سمت چپ) */
 .prev .double-arrow span {
   transform: rotate(135deg);
 }

 /* حالت غیرفعال شدن دکمه */
 .tab-nav:disabled {
   opacity: 0.2;
   cursor: not-allowed;
   filter: grayscale(1);
 }

 .tab-nav {
   background: none;
   border: none;
   padding: 30px 20px 0;
   cursor: pointer;
   transition: 0.3s;
   z-index: 10;
   position: absolute;

 }


 .double-arrow {
   display: flex;
   gap: 4px;
 }

 .double-arrow span {
   display: block;
   width: 8px;
   height: 8px;
   border-right: 2px solid #000;
   border-bottom: 2px solid #000;
 }

 /* انیمیشن برای دکمه بعدی (حرکت به راست) */
 .btn-next .double-arrow {
   animation: scrollRight 1.5s infinite;
 }

 .btn-next .double-arrow span {
   transform: rotate(-45deg);
 }

 /* انیمیشن برای دکمه قبلی (حرکت به چپ) */
 .btn-prev .double-arrow {
   animation: scrollLeft 1.5s infinite;
 }

 .btn-prev .double-arrow span {
   transform: rotate(135deg);
 }

 .about-us-page #popup-caption {
   display: flex;
   flex-direction: column;
   gap: 5px;
 }

 /* تعریف Keyframes برای حرکت به راست */
 @keyframes scrollRight {
   0% {
     transform: translateX(0);
     opacity: 0.3;
   }

   50% {
     transform: translateX(10px);
     opacity: 1;
   }

   100% {
     transform: translateX(0);
     opacity: 0.3;
   }
 }

 /* تعریف Keyframes برای حرکت به چپ */
 @keyframes scrollLeft {
   0% {
     transform: translateX(0);
     opacity: 0.3;
   }

   50% {
     transform: translateX(-10px);
     opacity: 1;
   }

   100% {
     transform: translateX(0);
     opacity: 0.3;
   }
 }

 /* غیرفعال کردن انیمیشن وقتی دکمه خاموش است */
 .tab-nav:disabled {
   opacity: 0.1;
   cursor: not-allowed;
 }

 .tab-nav:disabled .double-arrow {
   animation: none;
   /* انیمیشن متوقف شود */
 }

 @media (max-width: 1500px) {
   .home-page .section-title1 {
     width: 38%;
   }

   .section-wrapper {
     margin-top: 0;
   }

   .contact-data-img .middel-img img {
     width: 74%;
   }

   .contact-data-img .middel-img {
     display: flex;
     justify-content: end;
   }

   .contact-us {
     padding-top: 50px !important;
     padding-bottom: 0 !important;
   }

   .contact-us .diagonal-line {
     top: -28px !important;
     right: 50% !important;
   }
 }

 @media (max-width: 1470px) {
   .home-page .projects-section-def {
     margin-top: 0;
   }

   .home-page .project-item {
     width: 30%;
   }

   .home-page .project-item img {
     width: 100% !important;
   }

   .contact-page .contact-us {
     margin-top: 50px;
     margin-bottom: 150px;
   }
 }

 @media (max-width: 1370px) {
   .home-page .scroll-wrapper {
     margin: 0 0 90px;
   }

   .section-wrapper {
     margin-bottom: 0;
   }

   .home-page .contact-data {
     flex-direction: column;
     gap: 10px;
   }


   .contact-us .diagonal-line {

     right: 46%;
   }

   .home-page .contact-us .footer-line {
     align-items: flex-start;
     gap: 0px;
     flex-direction: column;
   }

   .home-page .diagonal-line {
     right: 39%;
     transform: rotate(-46deg)
   }

   .home-page #p3 .diagonal-line {
     transform: rotate(-47deg);
   }



   .home-page .main-section-services {
     width: 100%;
     padding-left: 20px;
   }

   .home-page #p3 .main-section-services {
     width: 100%;
     padding: 0 20px;
   }

   .home-page .mrg-d {
     margin-top: 10px;
     margin-bottom: 10px;
     overflow: visible;
   }
 }

 @media (max-width: 1300px) {
   .home-page .content-wrap {
     gap: 15px;
   }


   .contact-us .diagonal-line {
     display: none;
   }

   .home-page .text-side {
     width: 58%;
   }

   .home-page .img-mask-wrapper {
     width: 40%;
   }

   .home-page .img-mask-wrapper img {
     width: 100%;
   }

   .home-page .project-item {
     width: 46%;
   }

   .home-page .projects-section-def {
     margin-top: 40px;
     padding-left: 20px;
   }
 }

 @media (max-width: 1100px) {
   .contact-page .contact-us-s {
     height: auto !important;
   }

   .home-page .section-title-contact {
     padding-top: 140px;
     width: 100%;
   }

   .contact-page .section-title-contact {
     width: 100% !important;
   }

   .contact-data-img .middel-img img {
     width: 100%;
   }

   .contact-data-img .middel-img {
     justify-content: flex-start !important;
   }

   .contact-us {
     padding-top: 40px;
     flex-direction: column;
   }

   .contact-us .footer-line {
     gap: 12px;
     flex-direction: row;
   }

   .menu-footer .font-32 {
     font-size: 16px;
   }


 }

 @media (max-width: 900px) {
   .home-page .content-wrap {
     gap: 15px;
     flex-direction: column;
   }

   .home-page .text-side {
     width: 100%;
   }

   .home-page .img-mask-wrapper {
     width: 100%;
   }


   .home-page .section-title1 {
     /* width: 42%; */
   }

   .home-page .description-s {
     height: 80px;
   }

   .home-page .diagonal-line {
     display: none;
   }

   .home-page #p3 .description-s {
     height: 100%;
   }

   .home-page #p3 .section-title1 {
     /* width: 82%; */
   }

 }

 @media (max-width: 750px) {
   .home-page .description-s {
     height: 68px;
     font-size: 14px;
   }
 }


 /* wave animation */
 :root {
   --wave-color: #0e6f3b;
   --wave-distance: 6px;
   --wave-duration: .55s;
   --wave-step: .035s;
   --wave-ease: cubic-bezier(.22, 1, .36, 1);
 }

 .wave-hover {
   display: inline-block;
 }

 .wave-hover span {
   display: inline-block;
   color: inherit;
   will-change: transform, color;
   transform: translateY(0);
 }

 .wave-hover:hover span {
   animation: textWave var(--wave-duration) var(--wave-ease) both;
   animation-delay: calc(var(--char-index, 0) * var(--wave-step));
 }



 @keyframes textWave {
   0% {
     transform: translateY(0) !important;
     color: inherit;
   }

   35% {
     transform: translateY(calc(var(--wave-distance) * -1)) !important;
     color: var(--wave-color);
   }

   70% {
     transform: translateY(1px) !important;
     color: var(--wave-color);
   }

   100% {
     transform: translateY(0) !important;
     color: inherit;
   }
 }

 /* end */



 /* contact */
 .contact-page .contact-us {
   display: flex;
   width: 100%;
   justify-content: space-between;
   padding-top: 162px;
   padding-bottom: 62px;
   position: relative !important;
   overflow: hidden;
   align-items: flex-start;
   padding-left: 0;
   padding-right: 0;
 }

 .contact-page .contact-data-img {
   display: flex;
   align-items: center;
   gap: 24px;
 }

 .contact-page .contact-des {
   font-weight: normal;
   font-size: 16px;
 }

 .contact-page .contact-data {
   display: flex;
   flex-direction: column;
   gap: 10px;
 }

 .contact-page .contact-us .footer-line {
   font-size: 16px;
   display: flex;
   /* align-items: center;
   gap: 12px; */
 }

 .contact-page .contact-us .diagonal-line {
   top: 19px;
   right: 48%;
 }

 .contact-page .section-title-contact {
   flex-direction: column;
   justify-content: flex-start;
   width: 360px;
   align-items: flex-start;
   gap: 40px;
 }

 .contact-page .contact-us-s {
   display: flex;
   /* align-items: center; */
   /* height: calc(100vh - 144px); */
 }

 .services-page .main-container {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   /* padding: 0 100px; */
   border: 1px solid #A3A3A3;

 }

 .services-page .content-wrap {
   display: none;
   width: 100%;
   align-items: center;
   gap: 80px;
   justify-content: center;
   text-align: justify;
   padding: 0 50px 60px;
 }

 .services-page .content-wrap.active {
   display: flex;
 }

 .services-page .img-mask-wrapper {
   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
 }

 .services-page .text-side {
   opacity: 0;
   display: flex;
   flex-direction: column;
   gap: 24px;
 }

 .services-page .scroll-wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 5px;
   margin: 54px 0 90px;
 }

 .services-page .arrow {
   width: 15px;
   height: 15px;
   border-right: 2px solid #000;
   border-bottom: 2px solid #000;
   transform: rotate(45deg);
   animation: scrollDown 1.5s infinite;
 }

 .services-page .arrow:nth-child(1) {
   animation-delay: 0s;
 }

 .services-page .arrow:nth-child(2) {
   animation-delay: 0.3s;
 }

 .services-page .arrow:nth-child(3) {
   animation-delay: 0.6s;
 }

 @keyframes scrollDown {
   0% {
     opacity: 0;
     transform: translateY(0) rotate(45deg);
   }

   50% {
     opacity: 1;
   }

   100% {
     opacity: 0;
     transform: translateY(20px) rotate(45deg);
   }
 }

 .services-page .tabs {
   display: flex;
   /* gap: 40px; */
   margin-bottom: 42px;
   height: 72px;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   text-align: center;
 }

 .services-page .tab-btn {
   cursor: pointer;
   color: #aaa;
   transition: 0.3s;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   border-right: 1px solid #a3a3a3;
   border-bottom: 1px solid #a3a3a3;
   flex-direction: column;
 }

 .services-page .tab-btn:last-child {
   border-right: unset;
 }

 .services-page .tab-btn.active {
   color: #fff;
   background-color: #003F20;
 }

 .services-page .tab-btn:hover {
   color: #fff;
   background-color: #003F20;
 }

 .lang-switch {
   margin-top: -2px;
   font-weight: normal;
 }

 .active-category {
   color: #000 !important;
 }

 .active-category img {
   filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(740%) hue-rotate(114deg) brightness(92%) contrast(105%);
 }

 .project-list-page .Navigation,
 .services-page .Navigation {
   margin-bottom: 80px;
   direction: rtl;
 }

 .event-page .right-project-data {
   width: auto;
   padding-top: 20px;
   margin-top: 100px;direction: rtl;
 }

 .search-list .notfoundsearch {
   height: calc(100vh - 311px);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 29px;
   flex-direction: column;
   gap: 50px;
 }

 .search-list .search-section {
   position: relative;
 }

 .search-list #search-form {
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
   justify-content: center;
 }

 .search-list .search-submit-style {
   border: none;
   background: none;
   position: relative;
   z-index: 99999;
   margin-top: -21px;
   right: 24px;
 }

 .page-list .search-list .section-title {
   margin: 0 0 40px !important;
 }

 .page-list .search-list .projects-section {
   margin-bottom: 0;
 }

 .page-list .search-list .teamWrapper {
   margin-bottom: 40px;
 }

 .about-us-page .popup img {
   max-width: 77%;
 }

 .mrg-l-100 {
   margin-left: 45px;
   margin-bottom: 9px;
 }

 .about-us-page #popup-caption {
   font-weight: bold;
 }

 .about-us-page .popup-team img {
   max-width: 50% !important;
 }

 .df .project-item img {
   width: auto !important;
 }
 .home-page .hide-in{display: none;}
 .font-18{ font-size: 18px !important;}
 .blog-info-hight{ height: 182px;direction: rtl;}

 @media (min-width: 1600px) {
   .about-us-page .popup-team img {
     max-width: 80% !important;
   }


   
   .footer,
   .main-1300 {
     width: auto;
     margin: 0 100px;
   }

 }

 @media (max-width: 1500px) {


   .contact-page .contact-data-img .middel-img img {
     width: 74%;
   }

   .contact-page .contact-data-img .middel-img {
     display: flex;
     justify-content: end;
   }

   .contact-page .contact-us {
     padding-top: 50px;
   }

   .contact-page .contact-us .diagonal-line {
     top: -28px;
     right: 50%;
   }
 }

 @media (max-width: 1340px) {

   .description-article-data,
   .s-blog-m .project-card,
   .s-blog-m .project-card img {
     width: 100% !important;
   }

   .section-title1 {
    position: unset !important;
    
     width: 100% !important; 
     padding: 80px 0 !important;
     height: 100% !important;
     justify-content: end !important;
   }
   .home-page .diagonal-line{ display: none;}
   .home-page .main-section-services{ margin-bottom: 0;        margin-top: 45px;}

   .services-page .diagonal-line {
     right: 40%;
   }

   .skema-project {
     min-width: 280px;
     margin-bottom: 24px;
   }

   .project-nav {
     gap: unset;
     justify-content: space-between;
   }

   .page-list .first-item .project-info {
     gap: 10px;
     width: 100%;
   }

   .page-list .first-item {
     padding: 35px;
   }

   .home-page .certWrapper .project-card .img-box,
   .page-list .certWrapper .project-card .img-box {
     width: 95%;
   }

   .page-list .certWrapper .project-card {
     width: 30%;
     padding: 40px 20px;
   }

   .blog-page .image-wrap img,
   .page-list .certWrapper .project-card .img-box img {
     width: 100% !important;
   }

   
   
   .footer,
   .main-1300 {
     width: 100%;
     padding-right: 20px;
     padding-left: 20px;
   }

   .about-page .person-image-wrap {
     /* width: 55%; */
   }

   .quote-main {
     width: 100%;
   }

   .quote-main {
     padding: 30px;
   }

   /* .line-a {
     width: 100%;
   }

   .section-history .diagonal-line,
   .section-why .diagonal-line {
     right: 50%;
   } */

   .section-about {
     margin-top: 0px;
   }

 }

 @media (max-width: 1270px) {

   .section-why,
   .section-history {
     flex-direction: column;
   }

   .div-why div:nth-child(2),
   .div-why div:nth-child(3) {
     margin-left: 0;
   }

   .section-why .diagonal-line,
   .section-history .diagonal-line {
     display: none;
   }

   .section-history .div-why {
     width: 100%;
   }
 }

 @media (max-width: 1200px) {
   .about-page .person-image-wrap {
     width: 62%;
   }

   .about-page .image-wrap img {
     width: 100% !important;
   }

   .captcha-row {
     grid-template-columns: 100px 28px 120px !important;
   }

   .services-page .img-mask-wrapper,
   .services-page .img-mask-wrapper img,
   .services-page .text-side {
     width: 100%;
   }
 }

 @media (max-width: 970px) {

   .blog-page .section-why,
   .blog-page .s-blog-m .project-item {
     flex-direction: column;
   }

   .services-page .content-wrap {
     gap: 25px;
     padding: 0 20px 60px;
   }

   .project-data-section {
     gap: 0;
   }

   .skema-project {
     min-width: 220px;
   }

   .section-history .diagonal-line,
   .section-why .diagonal-line {
     display: none;
   }

   .page-list .certWrapper .project-card {
     width: 47%;
   }
 }

 @media (max-width: 800px) {
   footer {
     gap: 14px;
     flex-direction: column;
     border-top: 1px solid rgba(163, 163, 163, 1);
   }
 }


 @media (max-width: 1000px) {
.home-page .main-section-services {
    width: calc(100% - 100px);    display: flex;
    flex-direction: column-reverse;

}
#p3 .main-section-services {
        width: calc(100% - 100px);
        display: flex;
        flex-direction: column;
}
.main-project-list {

    flex-direction: row;
}
.project-image {
    overflow: hidden;
    width: 80%;
}
.triangle-overlay {
    position: absolute;
    height: 101%;
    inset: 0;
    width: 175%;
    height: 101%;}


 }



.home-page    .main-project-list {

    flex-direction: row;
}