@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{

    --ff-primary: "vazir", sans-serif;
}
.bi{
    color: rgb(104, 104, 240);
    font-size: 1.5rem;
    display: block;
}
.rezomeh{

    background-color: rgb(230, 230, 230);
    width: 400px;
    height: 3400px;
    margin: 1rem;
    font-family: vazir;
    
}
.rezomeh h1{
    text-align: center;
    padding-top: 1rem;
}
.rezomeh-2{

    background-color: rgb(230, 230, 230);
    width: 768px;
    height: 1024px;
    margin: 1rem;
    font-family: vazir;
    
}

.card-contact{

width: 360;
height: 360;
border: 2px solid rgb(153, 149, 149);
background-color: rgb(204, 204, 204);
border-radius: 0.5rem;
margin: 1rem;

}
.card-contact h3{
    text-align: center;
}
.card-contact p{
    color: red;
    text-align: center;
    font-family: vazir;
    padding: 0rem 0.2rem;
}
.card-contact-2{

    width: 360;
    height: 360;
    border: 2px solid rgb(153, 149, 149);
    background-color: rgb(33, 34, 38);
    border-radius: 0.5rem;
    margin: 1rem;
    
    }
    .card-contact-2 h3{
        text-align: center;
        color: white;
        background-color: rgb(179, 125, 79);
        padding: 0.5rem;
      
       
    }

    .flex-center-2{

        display: flex;
        justify-content: space-between;
        align-items: center;
       width: 330px;
       height: 30px;
        padding: 0.2rem 1rem;
        
    }
    .flex-center-3{

        display: flex;
        justify-content: space-between;
        align-items: center;
       width: 230px;
       height: 30px;
        padding: 0.2rem 1rem;
    }
.return p{
color: white;
line-height: 1.75rem;


}
.return-post{

    padding-right: 1rem;
   
    }
.return-aboutme{

padding: 1rem;
}

.flex-center input{
    border-radius: 0.5rem;
    width: 200px;
    height: 40px;
  
}
.flex-center .input-2{
    border-radius: 0.5rem;
    width: 250px;
    height: 40px;
  
}
.btn-input{
    background-color: rgb(9, 161, 9);
    width: 25px;
    height: 25px;
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
   font-family: vazir ;
   padding-bottom: 2rem;
   padding-left: 1.2rem;
   
}
.btn-input:hover{
    background-color: rgb(86, 238, 86);

}
.btn-input-2{
    background-color: rgb(9, 161, 9);
    width: 180px;
    height: 50px;
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
   font-family: vazir ;
   padding: auto;
   border-radius: 0.5rem;
   align-items: center;
   margin-bottom: 0.5rem;
   margin-right: 110px;
   margin-top: 0.5rem;
}
.btn-input-2:hover{
    background-color: rgb(86, 238, 86);

}
.btn{
   width: 3rem;
   height: 1.5rem;
   margin-right: 2rem;
   background-color: red;
   color: white;
   font-family: vazir;
   
}
.btn:hover{
    background-color: rgb(245, 98, 98);

}
.btn-remove{
    width: 140px;
    height: 40px;
    margin-right: 100px;
    background-color: red;
    color: white;
    font-family: vazir;
    border-radius: 0.5rem;
    
 }
 .btn-remove:hover{
     background-color: rgb(245, 98, 98);
 
 }
 .btn-final{
    width: 140px;
    height: 40px;
    margin-right: 125px;
    background-color: rgb(25, 39, 230);
    color: white;
    font-family: vazir;
    border-radius: 0.5rem;

 }
.flex-center{

    display: flex;
    justify-content: space-between;
    align-items: center;
   width: 330px;
   height: 60px;
    padding: 0.2rem 1rem;
}
.flex-center-p{

    display: flex;
    justify-content: space-between;
    align-items: center;
   width: 330px;
   height: 60px;
    
}
.grid-center{


    display: grid;
    grid-template-columns: repeat(4,1fr);
    justify-content: center;
    column-gap: 2rem;
}
.succeed-matn{
    background-color: rgb(43, 237, 243);
    width: 200px;
    height: 30px;
    text-align: center;
    margin-right: 80px;
    padding: 0.2rem;
    border-radius: 0.5rem;
}
.main{

    width: 768px;
    height: 1024px;
    background-color: rgb(230, 230, 230);
    position: relative;
    

}
.main-1{
    width: 300px;
    height: 990px;
    background-color: rgb(33, 34, 38);
    position: absolute;
    margin-top: 34px;


}
.main-1_1{
    width: 200px;
    height: 200px;
    background-color: white;
    position: absolute;
    margin-top: 34px;
    margin-right: 50px;
    z-index: 1;


}
.main-1_1 img{
    width: 200px;
    height: 200px;
    z-index: 2;
}
.main-1_2{
    width: 220px;
    height: 220px;
    background-color: rgb(179, 125, 79);
    position: absolute;
    margin-top: 26px;
    margin-right: 40px;


}
.main-2{
width: 260px;
height: 50px;
background-color: rgb(179, 125, 79);
margin-right: 40px;
position: absolute;
margin-top: 340px;


}
.main-2 h4{
    color: white;
    font-size: 15pt;
    font-family: vazir; 
    position: absolute;
    margin-right: 70px;
    margin-top: 10px;

  
}
.main-2 p{
    color: white;
    font-size: 10pt;
    font-family: vazir;
    margin-right: -60px;
    margin-top: 20px;  
    text-align: center;  
    
}
.main-3{
    width: 260px;
    height: 50px;
    background-color: rgb(179, 125, 79);
    margin-right: 40px;
    position: absolute;
    margin-top: 540px;
    
    
    }
    .main-3 h4{
        color: white;
        font-size: 15pt;
        font-family: vazir;    
        position: absolute;
        margin-right: 50px;
        margin-top: 10px;
    
      
    }
    .main-3 p{
        color: white;
        font-size: 10pt;
        font-family: vazir;
        margin-right: -50px;
        margin-top: 20px;  
        text-align: right;  
        
    }
    .main-4{
        width: 260px;
        height: 50px;
        background-color: rgb(179, 125, 79);
        margin-right: 40px;
        position: absolute;
        margin-top: 800px;
        
        
        }
        .main-4 h4{
            color: white;
            font-size: 15pt;
            font-family: vazir;    
            position: absolute;
            margin-right: 50px;
            margin-top: 10px;
        
          
        }
        .main-4 p{
            color: white;
            font-size: 10pt;
            font-family: vazir;
            margin-right: -50px;
            margin-top: 20px;  
            text-align: right;  
            
        }

        
    .left{
        width: 468px;
        height: 990px;
        background-color: rgb(230, 230, 230);
        position: absolute;
        margin-top: 34px;
        margin-right: 300px;



    }

.left-1{
    width: 400px;
    height: 170px;
    background-color: rgb(179, 125, 79);
    left: 0;
    position: absolute;
    margin-top: 40px;
}
.left-1 h4{
    color: white;
    font-size: 15pt;
    font-family: vazir; 
    position: absolute;
    margin-right: 80px;
    margin-top: 10px;

  
}

.left-1_1{
    left: 0;
    position: absolute;
    margin-top: 140px;
}
.left-1_1 p{
    color: black;
    font-size: 10pt;
    font-family: vazir;
    margin-right: -50px;
    margin-top: 100px;  
    text-align: right;  
    
}

    
.left-2{
    width: 374px;
    height: 50px;
    background-color: rgb(179, 125, 79);
    left: 0;
    position: absolute;
    margin-top: 340px;
    
    
    }
    .left-2 h4{
        color: white;
        font-size: 15pt;
        font-family: vazir; 
        position: absolute;
        margin-right: 80px;
        margin-top: 10px;
    
      
    }

    .left-2 p{
        color: black;
        font-size: 10pt;
        font-family: vazir;
        margin-right: -100px;
        margin-top: 20px;  
        text-align: right;  
        
    }
    .left-3{
        width: 374px;
        height: 50px;
        background-color: rgb(179, 125, 79);
        left: 0;
        position: absolute;
        margin-top: 540px;
        
        
        }
        .left-3 h4{
            color: white;
            font-size: 15pt;
            font-family: vazir;    
            position: absolute;
            margin-right: 100px;
            margin-top: 10px;
        }
        
    .left-3 p{
        color: black;
        font-size: 10pt;
        font-family: vazir;
        margin-right: -100px;
        margin-top: 20px;  
        text-align: right;  
        
    }
   
        .left-4{
            width: 374px;
            height: 50px;
            background-color: rgb(179, 125, 79);
            left: 0;
            position: absolute;
            margin-top: 800px;
            
            
            }
            .left-4 h4{
                color: white;
                font-size: 15pt;
                font-family: vazir;    
                position: absolute;
                margin-right: 100px;
                margin-top: 10px;
            }
            .left-4 p{
                color: black;
                font-size: 10pt;
                font-family: vazir;
                margin-right: -100px;
                margin-top: 20px;  
                text-align: right;  
                
            }