@font-face {
  font-family: "vazir";
  src: url("../fonts/vazir/Vazir-Medium-FD-WOL.woff") format("woff2"),
      url("../fonts/vazir/Vazir-Medium-FD-WOL.woff") format("woff"),
      url("../fonts/vazir/Vazir-Medium-FD-WOL.ttf") format("truetype");
}

:root {
  --clr-primary-1: #2f3e46;
  --clr-primary-2: #354f52;
  --clr-primary-3: #52796f;
  --clr-primary-4: #84a98c;
  --clr-primary-5: #cad2c5;
  --clr-primary-6: #5a189a;
  --clr-grey-1: #102a42;
  --clr-grey-2: #617d98;
  --clr-grey-3: rgb(241, 245, 248);
  --clr-white: #fff;
  --ff-primary: "vazir", sans-serif;
  --transition: all 0.3s linear;
  --radius: 0.5rem;
  --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  --max-width: 1170px;
}


/*
=============== 
Global Styles
===============
*/

*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
  list-style-type: none;
}
a {
  text-decoration: none;
}
body {
  font-family: var(--ff-primary);
  color: var(--clr-grey-1);
}

.btn {
  background: var(--clr-primary-2);
  color: var(--clr-white);
  padding: 0.375rem 0.75rem;
  display: inline-block;
  transition: var(--transition);
  font-size: 0.875rem;
  border: 2px solid transparent;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.btn:hover {
  color: var(--clr-primary-1);
  background: var(--clr-primary-3);
}

/* این بخش سایت را به دوقسمت تقسیم می کند */

.center-main{

  display: flex;
  justify-content: space-between;
}


.side-left{
  margin-right: 0px;
}

.sidbar-right{
  display: none;
  

   }

   .sidbar-right-show{


    width: 250px;
    position: fixed;
    height: 100vh;
    display: block;
    transition: var(--transition);
    background-color: var(--clr-grey-2);
    padding: 2rem;
    z-index: 2;
    
}

.sidbar-right-show:hover{

  overflow-y: auto;
}

.sidbar-right-title{
  background-color: rgba(238, 210, 210, 0.795);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin-right: -1rem;
  padding: 0.25rem;
  width: 11rem;
  text-align: center;
 
}




.li-item{

  background-color: #67dee2;
  padding: 0.25rem;
  border-radius: 0.5rem;
  border: #9eb2c7;
  margin-top: 0.5rem;
  cursor: pointer;
  align-items: center;
  transition: var(--transition);
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  margin-right: -1rem;
  width: 11rem;
  text-align: center;


}

.li-item :hover{

 padding: 0.25rem;
  color:red;
 
}


.boot-icon{
  font-size: 1rem;
  margin-left: 0.25rem;
  transition: var(--transition);
}
.active{ background-color: black; color:blue;}

.li-items{ 
  background-color: #9eedf0;
  padding: 0.2rem;
  border-radius: 0.2rem;
  border: #9eb2c7;
  margin-top: 0.2rem;
  cursor: pointer;
  align-items: center;
  transition: var(--transition);
  display: flex;
  justify-content: space-between;

}

.li-items .boot-icon{
  font-size: 1rem;
  margin-left: 0.2rem;
  transition: var(--transition);

}

.bi-chevron-down{

  font-size: 1rem;

}
.li-items :hover{

    padding: 0.5rem;
     color: rgb(21, 216, 14);
     
    
 }
 .ul-payeh{
     display: none;
 }
 .ul-riazi{
    display: none;
}
.side-left-show{
  margin-right: 250px;
}
.btn-x{
  font-size: 2rem;
  background-color: transparent;
  border-color: transparent;
  transition: var(--transition);
  cursor: pointer;
  color: red;
  display: block;

}

.btn-x:hover{

 color: rgb(240, 94, 94);
}


@media screen  and (min-width:720px){
  .sidbar-right{
  
                  width: 250px;
                  position: fixed;
                  height: 100vh;
                  display: block;
                  transform: translateX(0%);
                  transition: var(--transition);
                  background-color: var(--clr-grey-2);
                  padding: 2rem;
                  z-index: 1;
                  
  }

  .sidbar-right:hover{
    overflow-y: auto;
    
    }

    
.sidbar-right-title h3{

  font-size: 25px;
 
}
.sidbar-right-title{

background-color: rgba(238, 210, 210, 0.795);
display: flex;
flex: 1fr;
justify-content: center;
}

.side-left{
  margin-right: 250px;
}


.btn-x{
  display: none;

}


}

/* شروع بخش چپ سایت */


.btn-toggle {
  font-size: 2rem;
  background-color: transparent;
  border-color: transparent;
  transition: var(--transition);
  cursor: pointer;
  display: inline-block;
  }
.btn-toggle:hover{
  transform: scale(1.1);
  color: var(--clr-grey-2);
 
}
/*
=============== 
Navbar
===============
*/



.nav {
  background: var(--clr-primary-5);
  height: 4.5rem;
  padding: 1rem;
  transition: var(--transition);
  z-index: 3;
}

/* .nav-center {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
} */
.nav-links {
  /* display: grid;
 grid-template-columns: repeat(5, 1fr);
 column-gap: 2rem;
 justify-items: center;
 justify-self: end;
 align-items: center;  */
 display: flex;
 justify-content: space-between;
 column-gap: 0.5rem;
}

.nav-center2{
  display:flex;
  justify-content: space-between;
  /* flex: 1  auto; */
  
  
}
.nav-center3{
  display:flex;
  justify-content: space-between;
   gap: 1rem;
  justify-self: end;
  font-size: 0.75rem;
  z-index: 5;
}
.nav-center4{
  display:flex;
  justify-content: space-between;
   gap: 0.5rem;
  

}

.nav-center4 h2{

  font-size: 0.75rem;
}

.nav-btn {
  justify-self: end;
  background: transparent;
  border-color: transparent;
  color: var(--clr-primary-2);
  font-size: 2rem;
  cursor: pointer;
}

/* این کلاسهای دکمه ورود به کاربری است  */
.btn-toggle {
  font-size: 1rem;
  background-color: transparent;
  border-color: transparent;
  transition: var(--transition);
  cursor: pointer;
  display: inline-block;
  }
.btn-toggle:hover{
  transform: scale(1.1);
  color: var(--clr-grey-2);
   
}
.person{

  margin-left: 0.5rem;
}

.ul-person{
  display: none;
  
}
.person-item{
  color: black;
  font-size: 0.8rem;
  border: 1px solid rgb(172, 166, 166);
  padding: 0.1rem;
  
}
@media screen and (min-width: 768px) {
  .nav-btn {
      display: none;
  }

  .nav-links {
       /* display: grid;
      grid-template-columns: repeat(5, 1fr);
      column-gap: 2rem;
      justify-items: center;
      justify-self: end;
      align-items: center;  */
      display: flex;
      justify-content: space-between;
      column-gap: 2rem;
  }

  .nav-links a {
      color: var(--clr-grey-1);
      transition: var(--transition);
  }

  .nav-links a:hover {
      color: var(--clr-primary-4);
  }

  .nav-center3{
    display:flex;
    justify-content: space-between;
     gap: 1rem;
    justify-self: end;
    font-size: 1.25rem;
    z-index: 5;
  }

  .nav-center4 h2{

    font-size: 1.5rem;
  }

  .nav-center4{
    display:flex;
    justify-content: space-between;
     gap: 1rem;
    
  
  }
  .person{

    margin-left: 1rem;
  }
  .btn-toggle {
    font-size: 1.5rem;
    background-color: transparent;
    border-color: transparent;
    transition: var(--transition);
    cursor: pointer;
    display: inline-block;
    }
}


.navbar-fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--clr-white);
  box-shadow: var(--light-shadow);
  
}



/*
=============== 
Sidebar
===============
*/

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clr-grey-3);
  z-index: 4;
  display: grid;
  /* justify-content: center;
  align-items: center; */
  place-content: center;
  transform: translateX(100%);
  transition: var(--transition);
  
}

.show-sidebar {
  transform: translateX(0);
}

.close-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 3rem;
  background: transparent;
  border: transparent;
  color: #bb2525;
  cursor: pointer;
  transition: var(--transition);
}

.close-btn:hover {
  color: #e66b6b;
}

.sidebar-links {
  text-align: center;
}

.sidebar-links a {
  font-size: 1.5rem;
  color: var(--clr-grey-2);
  display: inline-block;
  margin-bottom: 1.5rem;
}

.sidebar-links a:hover {
  color: var(--clr-primary-4);
}

.social-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  justify-items: center;
  column-gap: 2rem;
  margin-top: 3rem;
}

.social-icon {
  font-size: 1.5rem;
  color: var(--clr-grey-1);
  transition: var(--transition);
}

.social-icon:hover {
  color: var(--clr-primary-4);
}
.sidbar-right-title{

  margin-top: 0rem;
}

/*
=============== 
Main
===============
*/
.main{
  background: var(--clr-primary-3) ;
   min-height: 100rem;
   margin-left: 250px;
   margin-left: 250px;
   
   

}



.main-card{
                  background: var(--clr-grey-2);
                  box-shadow: var(--light-shadow);
                  transition: var(--transition);
                  width: 15rem;
                  height: 24rem;
                  border: solid var(--clr-white);
                  border-radius: var(--radius);
              
                  margin:0.5rem 0.5rem;
                  
}


.main-card:hover{
  transform: scale(1.05);
  box-shadow: var(--dark-shadow);

}

.main-card .btn-top{
  background:linear-gradient(rgb(67, 245, 58), rgb(50, 245, 11));
  margin-right: 2.2rem;
  margin-top: 0.5rem;
  border-radius: var(--radius);
  width: 10rem;
  height: 2.2rem;  
  color: black; 
  font-family: var(--ff-primary); 
  display: inline-block;     
  padding: 0.375rem 0.75rem;
  transition: var(--transition);
  font-size: 0.875rem;
  cursor: pointer;


}
.main-img-container{
  position: relative;
  display: grid;
  justify-items: center;
  
                    

}
.main-img{
          
          object-fit: cover;
          max-width: 20rem;
          height: 8rem;
          margin-top: 3rem;
          align-items: center;

                
                
}
.main-center p{

  font-size: 1rem;
  color:rgb(224 231 118);
  padding: 0.5rem;
  border: 0.25rem solid #3a3232;
  text-align: center;
  
}
.main-info{
  
                position: absolute;
                top: 0;
                right: 0;}

.main-footer .btn{
                background:linear-gradient(rgb(67, 245, 58), rgb(50, 245, 11));
                margin-right: 2.2rem;
                margin-top: 0.5rem;
                border-radius: var(--radius);
                width: 10rem;
                height: 2.2rem;  
                color: black; 
                font-family: var(--ff-primary); 
                display: inline-block;     
                padding: 0.375rem 0.75rem;
                transition: var(--transition);
                font-size: 0.875rem;
                cursor: pointer;
     }

     
.main-footer .btn:hover{

background: #156302;
color: #fff;
transform: scale(1.2);


}
@media screen and (min-width:0px) {
  .center{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 0.5rem 0.5rem;
    grid-template-areas: 
        "a  z"
        "b  z"
        "c  z"
        "d  z"
        "e  z"
        "f  z"
        "g z"
        "h z"
        "i  z"
        "j  z"
        "k  z"
        "l  z"
        "m  z"
        "n  z"
        "o  z"
        "p  z"
        "q  z"
        "r  z"
        "s  z"
        "t  z"
        "z1  z1"
       
        ;
        gap: 0.5rem;

}
.project-1 {
        grid-area: a;
       
    }

    .project-2 {
        grid-area: b;
        
    }

    .project-3 {
        grid-area: c;
        
    }

    .project-4 {
        grid-area: d;
       
    }
    .project-5 {
      grid-area: e;
     
  }

  .project-6 {
    grid-area: f;
    
}

.project-7 {
  grid-area: g;
 
}

.project-8 {
  grid-area: h;
 
}

.project-9 {
  grid-area: i;

}
.project-10 {
  grid-area: j;
 
}

.project-11 {
  grid-area: k;
  
}

.project-12 {
  grid-area: l;
  
}

.project-13 {
  grid-area: m;
 
}
.project-14 {
grid-area: n;

}

.project-15 {
grid-area: o;

}

.project-16 {
grid-area: p;

}

.project-17 {
grid-area: q;

}

.project-18 {
grid-area: r;

}
.project-19 {
  grid-area: s;
  
  }
  .project-20 {
    grid-area: t;
    
    }
    .project-21{
      grid-area: z;
      z-index: 1;
    
    }
    .project-22{
      grid-area: z1;
     
    }
    




}
@media screen and (min-width:920px) {
  .center{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 0.5rem 0.5rem;
    grid-template-areas: 
        "a b z"
        "c d z"
        "e f z"
        "g h z"
        "i j z"
        "k l z"
        "m n z"
        "o p z"
        "q r z"
        "s t z"
        "z1 z1 z1"
       
        ;
        gap: 0.5rem;

}
.project-1 {
        grid-area: a;
       
    }

    .project-2 {
        grid-area: b;
        
    }

    .project-3 {
        grid-area: c;
        
    }

    .project-4 {
        grid-area: d;
       
    }
    .project-5 {
      grid-area: e;
     
  }

  .project-6 {
    grid-area: f;
    
}

.project-7 {
  grid-area: g;
 
}

.project-8 {
  grid-area: h;
 
}

.project-9 {
  grid-area: i;

}
.project-10 {
  grid-area: j;
 
}

.project-11 {
  grid-area: k;
  
}

.project-12 {
  grid-area: l;
  
}

.project-13 {
  grid-area: m;
 
}
.project-14 {
grid-area: n;

}

.project-15 {
grid-area: o;

}

.project-16 {
grid-area: p;

}

.project-17 {
grid-area: q;

}

.project-18 {
grid-area: r;

}
.project-19 {
  grid-area: s;
  
  }
  .project-20 {
    grid-area: t;
    
    }
    .project-21{
      grid-area: z;
      z-index: 1;
    
    }
    .project-22{
      grid-area: z1;
     
    }
    




}

@media screen and (min-width:1250px) {
  .center{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0.5rem 0.5rem;
    grid-template-areas: 
        "a b c z"
        "d e f z"
        "g h i z"
        "j k l z"
        "m n o z"
        "p q r z"
        "s t t z"
        "z1 z1 z1 z1"
       
        ;
        gap: 0.5rem;

}
.project-1 {
        grid-area: a;
       
    }

    .project-2 {
        grid-area: b;
        
    }

    .project-3 {
        grid-area: c;
        
    }

    .project-4 {
        grid-area: d;
       
    }
    .project-5 {
      grid-area: e;
     
  }

  .project-6 {
    grid-area: f;
    
}

.project-7 {
  grid-area: g;
 
}

.project-8 {
  grid-area: h;
 
}

.project-9 {
  grid-area: i;

}
.project-10 {
  grid-area: j;
 
}

.project-11 {
  grid-area: k;
  
}

.project-12 {
  grid-area: l;
  
}

.project-13 {
  grid-area: m;
 
}
.project-14 {
grid-area: n;

}

.project-15 {
grid-area: o;

}

.project-16 {
grid-area: p;

}

.project-17 {
grid-area: q;

}

.project-18 {
grid-area: r;

}
.project-19 {
  grid-area: s;
  
  }
  .project-20 {
    grid-area: t;
    
    }
    .project-21{
      grid-area: z;
      z-index: 1;
    
    }
    .project-22{
      grid-area: z1;
     
    }
    




}



/* این بخش سرچ چپ سایت می باشد  */
.search-left{

                  /* width: 230px;
                  position: fixed;
                  height: 100vh;
                  display: block;
                  transform: translateX(0%);
                  transition: var(--transition);
                  background-color: var(--clr-grey-2); */
                  padding: 1rem;
                  background-color: #a9ed98;
                  /* top:0;
                  left: 0; */
                  box-shadow: var(--dark-shadow);
                
                  height: 100vh;
                  position: fixed;
                  
}
                  


.search-title{

  margin-top: 4rem;
}
.form-search{
  display: flex;
  margin-top: 0.5rem;
}


/* این بخش پیام های درخواست در صفحه اصلی سایت است  */
.section-darkhast{

  border: 0.25rem solid rgb(133, 127, 127);
  padding: 0.5rem;
}
.comment_darkhast-form{

  display: flex;
  margin-top: 0.5rem;
}
.btn-comment-darkhast{
  font-size: 1rem;
  background-color: #54a3f8;
  width: 11.2rem;
  height: 2rem;
}
.btn-comment-darkhast:hover{
  background-color: #93c5fa;

}
.form-control{
  height: 5rem;
}
.input-mobile-darkhast{
  height: 2rem;
  width: 11.2rem;
  margin-bottom: 0.5rem;
}
.icon-darkhast{
  color: red;
  font-size: 1rem;

  height: 2rem;
  width: 11.2rem;
  text-align: center;

}
.icon-darkhast-succeed{
  color: green;
  font-size: 1rem;
 
  height: 2rem;
  width: 11.2rem;
  text-align: center;


}




/*
=============== 
Footer
===============
*/

.footer {
  padding-bottom: 2rem;
  background: #222;
  display: grid;
  place-items: center;
}

.footer .social-icons {
  margin-bottom: 2rem;
}

.footer .social-icon {
  color: var(--clr-primary-2);
}

.footer .social-icon:hover {
  color: var(--clr-primary-5);
}

.footer p {
  font-size: 1.25rem;
  color: var(--clr-white);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}