@font-face {

    font-family: "iransans";

    src: url("fonts/Sans\ a4fran3.woff") format("woff");

  }

body {

    font-family: "iransans"!important;

    background-color: #f5f5f5;

    margin: 0;

    padding: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    direction:rtl;

}



.profile-card {

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    width: 400px;

    padding: 20px;

}



.profile-header {

    display: flex;

    align-items: center;

    margin-bottom: 20px;
    justify-content: space-between;

}



.profile-image {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    margin-left: 15px;

}

.profile-info{
    display:flex;
}

.infor{
    display:flex;
    flex-direction: column;
}
.profile-info div h2 {

    margin: 0;

    font-size: 18px;

    color: #333;

}



.profile-info div p {

    margin: 4px 0;

    color: #666;

    font-size: 14px;

    display: flex;

    align-items: center;

}



.profile-info p i {

    margin-left: 8px;

    color: #007bff;

}



h1{

    font-size:15px;

}



.profile-info p a{

    text-decoration:none;

    color: #666;

}



.profile-details {

    border-top: 1px solid #ddd;

    border-bottom: 1px solid #ddd;

    padding: 10px 0;

    margin: 15px 0;

}



.profile-details p {

    margin: 5px 0;

    color: #333;

    font-size: 14px;

    display: flex;

    align-items: center;

}



.profile-details p i {

    margin-left: 8px;

    color: #28a745;

}



.profile-details span {

    font-weight: bold;

    color: #000;

}



.profile-stats {

    display: flex;

    justify-content: space-between;

    text-align: center;

}



.profile-stats div p {

    margin: 5px 0;

    font-size: 14px;

}



.profile-stats div p:first-child {

    display: flex;

    align-items: center;

    justify-content: center;

}



.profile-stats div p:first-child i {

    margin-left: 8px;

    color: #007bff;

}



.profile-stats div:first-child p:first-child {

    color: #007bff;

}



.profile-stats div:nth-child(2) p:first-child {

    color: #28a745;

}



.profile-stats div:last-child p:first-child {

    color: #ff9800;

}



body {

    font-family: 'Arial', sans-serif;

    background-color: #f5f5f5;

    margin: 0;

    padding: 20px;

    display: flex;

    justify-content: center;

    align-items: flex-start;

}



.container {

    display: flex;

    width: 100%;

    max-width: 1200px;

    flex-direction: column;

    margin-top: 43px;

}



.profile-card {

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    width: 60%;

    padding: 20px;

    margin-right: 20px;

}



.visit{

  display: none;

}

.visit-method {

    position: fixed;

    top: 113px;

    left: 20px;

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    width: 300px;

    padding: 0px 20px 20px 20px;

}



.visit-method h3 {

    margin-bottom: 7px;

    font-size: 18px;

    color: #333;

    text-align: center;

}



.visit-method .visit-option {

    border: 1px solid #ddd;

    border-radius: 8px;

    padding: 10px;

    margin-bottom: 15px;

    position: relative;

    cursor: pointer;

}



.visit .visit-option {

    border: 1px solid #ddd;

    border-radius: 8px;

    padding: 10px;

    margin-bottom: 15px;

    position: relative;

    cursor: pointer;

}

a{

    text-decoration:none;

}



.visit-option p {

    margin: 5px 0;

    font-size: 14px;

    color: #555;

}



.visit-option i {

    color: #007bff;

    font-size: 20px;

    padding-left: 5px;

}



.visit-option.active {

    border-color: #007bff;

    background-color: #f0f8ff;

}



.continue-btn {

    display: block!important;

    width: 100%!important;

    background-color: #28a745!important;

    color: #fff!important;

    border: none!important;

    border-radius: 8px!important;

    padding: 10px!important;

    text-align: center!important;

    font-size: 16px!important;

    cursor: pointer!important;
  line-height: 1.2!important;
}



.continue-btn:hover {

    background-color: #218838!important;

}

.video-box{

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    width: 60%;

    padding: 20px;

    margin-right: 20px;

}

.video-link{

    display: flex;

    align-items: center;

    gap: 7px;

    color: #007bff;

    font-size: 16px;

}

video{

    width: 100%;

    border-radius: 15px;

}

.arrow {

    border: solid black;

    border-width: 0 2px 2px 0;

    display: inline-block;

    padding: 3px!important;

    margin-right: 5px;

    transition: transform 0.3s ease;

    background: unset!important;

    border-radius: unset!important;

  }

  .about-me-box{

    font-size: 13px;

  }

  .hidden-text{

    display: block;

    text-align: center;

    color: #007bff;

    cursor: pointer;

  }

  .hidden-text .arrow {

    transform: rotate(45deg); 

  }

  .show-less{

    text-align: center;

    color: #007bff;

    cursor: pointer;

  }

  .show-less .arrow {

    transform: rotate(-135deg); 

  }

  

  .more-text {

    display: none;

    margin-top: 10px;

  }



  .hidden{

    display: block;

    text-align: center;

    color: #007bff;

    cursor: pointer;

  }

  .hidden .arrow {

    transform: rotate(45deg); 

  }

  .less{

    text-align: center;

    color: #007bff;

    cursor: pointer;

  }

  .less .arrow {

    transform: rotate(-135deg); 

  }

  

  .more {

    display: none;

    margin-top: 15px;

  }

.me-content span{

    background: #b9b9b9;

    padding: 5px;

    border-radius: 10px;

    margin-left: 5px;

    font-size: 13px;

}

.related-posts {

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    width: 60%;

    padding: 20px;

    margin-right: 20px;

  }

  

  .related-posts h2 {

    margin-bottom: 20px;

    font-size: 20px;

    color: #333;
display: flex;
    justify-content: space-between;
        align-items: center;
  }

 .related-posts h2  a{
     font-size: 15px;
 }  

  .posts-list {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: space-around;

  }

  

  .post-item {

    background-color: #ffffff;

    border: 1px solid #008000;

    border-radius: 10px;

    padding: 10px;

    width: calc(32% - 40px);

    text-align: center;

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);

  }

  

  .post-img {

    position: relative;

    border-radius: 10px;

    overflow: hidden;

  }

  

  .post-img img {

    width: 100%;

    height: auto;

    display: block;

  }

  

  .category-label {

    position: absolute;

    top: 10px;

    right: 10px;

    background-color: #007bff;

    color: #fff;

    padding: 5px 10px;

    border-radius: 5px;

    font-size: 12px;

    font-weight: bold;

  }

  

  .post-title {

    margin: 15px 0 10px;

    font-size: 18px;

    color: #444;

  }

  

  .post-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 10px;

  }

  

  .post-date {

    font-size: 12px;

    color: #777;

  }

  

  .read-more-btn {

    background-color: #fff;

    color: #800080;

    border: 1px solid #800080;

    padding: 5px 10px;

    border-radius: 5px;

    font-size: 12px;

    cursor: pointer;

    font-family: "iransans"!important;

  }

  

  .read-more-btn:hover {

    background-color: #f0f0f0;

  }

  .review-box {

    margin-top: 7px;

    border: 1px solid #ddd;

    border-radius: 10px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    text-align: center;

  }

  .review-box h3 {

    font-size: 16px;

    margin-bottom: 12px;

  }

  .rating {

    font-size: 28px;

    margin: 10px 0;

  }

  .details {

    font-size: 14px;

    color: #555;

    margin-top: 10px;

  }

  .details span {

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 8px 0;

  }

  .details span i {

    color: #007bff;

    margin-left: 8px;

  }

  .open-popup {

    margin-top: 15px;

    display: inline-block;

    padding: 10px 20px;

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 5px;

    text-decoration: none;

    cursor: pointer;

    width: 100%;

  }

  .open-popup:hover {

    background-color: #0056b3;

  }



          /* دکمه ثبت نظر */

          .open-popup {

            background-color: #007bff;

            color: white;

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            cursor: pointer;

        }



        /* استایل برای پاپ‌آپ */

        .popup {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.5);

            z-index: 1000;

        }



        .popup-content {

            background-color: white;

            margin:auto;

            padding: 20px;

            border-radius: 10px;

            width: 90%;

            max-width: 400px;

            position: relative;

        }



        .close-btn {

            position: absolute;

            top: 10px;

            left: 10px;

            cursor: pointer;

            color: red;

            font-size: 20px;

        }



        label {

            display: block;

            margin-bottom: 5px;

        }



        input, textarea {

            width: 100%;

            margin-bottom: 10px;

            padding: 8px;

            box-sizing: border-box;

            direction: rtl;

        }



        .rating {

            display: flex;

            justify-content: flex-start;

            direction: ltr; /* نمایش ستاره‌ها از چپ به راست */

        }



        .rating input {

            display: none;

        }



        .rating label {

            font-size: 30px;

            color: #ddd;

            cursor: pointer;

        }



        .rating input:checked ~ label,

        .rating label:hover,

        .rating label:hover ~ label {

            color: gold;

        }



        .captcha {

            background-color: #f2f2f2;

            padding: 10px;

            text-align: center;

            font-weight: bold;

            letter-spacing: 2px;

            margin-bottom: 10px;

        }



        button {

            background-color: #28a745;

            color: white;

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            cursor: pointer;

        }
        .review-box button{
                        width: 100%;
        }
        .me-content{
                line-height: 2.5;
        }

  .number{

    display: flex;

    justify-content: center;

    align-items: center;

    margin: -21px;

  }

  .comments{

    margin-top: -9px;

    margin-right: 5px;

  }

  .comments p{

    margin-bottom: 5px;

    font-size: 14px;

    color: #555;

  }

  .comments span{

    color: #ffa500;

    font-size: 11px;

  }

  .review-card {

    border: 1px solid #ddd;

    border-radius: 10px;

    padding: 20px;

    margin-bottom: 15px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    background-color: #fff;

  }

  .review-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 10px;

  }

  .review-header .user-info {

    display: flex;

    align-items: center;

  }

  .user-info img {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    margin-left: 10px;

  }

  .user-info .name {

    font-weight: bold;

  }

  .review-header .date {

    font-size: 12px;

    color: #888;

  }

  .review-rating {

    color: #ffa500;

    margin: 10px 0;

  }

  .review-body {

    font-size: 14px;

    color: #333;

    line-height: 1.6;

  }

  .review-footer {

    display: flex;

    justify-content: space-between;

    font-size: 12px;

    color: #555;

    margin-top: 10px;

  }

  .review-footer .recommend {

    color: green;

    display: flex;

    align-items: center;

  }

  .review-footer .recommend i {

    margin-left: 5px;

  }

  .review-footer .time {

    display: flex;

    align-items: center;

  }

  .review-footer .time i {

    margin-left: 5px;

  }

  .review-card{

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    width: 60%;

    padding: 20px;

    margin-right: 20px;

  }

  .review-item{

    border: 1px solid #e2e2e2;

    padding: 10px;

    border-radius: 10px;

    margin-bottom: 10px;

  }

  .hidden-comment{

    display: block;

    text-align: center;

    color: #007bff;

    cursor: pointer;

  }

  .hidden-comment .arrow {

    transform: rotate(45deg); 

  }

  .comment-less{

    text-align: center;

    color: #007bff;

    cursor: pointer;

  }

  .comment-less .arrow {

    transform: rotate(-135deg); 

  }

  

  .more-comment {

    display: none;

    margin-top: 15px;

  }



  @media screen and (max-width: 768px) {

    .visit-method{

      display: none;

    }

    .visit{

      display: unset;

      background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    width: 90%;

    padding: 0px 20px 20px 20px;

    }

    .visit h3 {

      margin-bottom: 7px;

      font-size: 18px;

      color: #333;

      text-align: center;

  }

  .profile-card{

    width: 90%;

    margin-right: unset;

  }

  .video-box{

    width: 90%;

    margin-right: unset;

  }

  .related-posts{

    width: 90%;

    margin-right: unset;

  }

  .review-card{

    width: 90%;

    margin-right: unset;

  }

  .popup-content{

    margin: 33% auto;

}

}