p {
    color: #1D2939;
}﻿

.icon-pack {
    display: none;
}

.agent__detail-container {
    width: 95%;
    margin: 0 auto;
}

.Agent__header {
    display: grid;
    grid-template-columns: 1fr 3fr;
   
}

.agent__profile {
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.agent__profile-container {
    padding: 20px;
}

.agent__proflile-img {
    height: 243px;
    width: 243px;
    object-fit: cover;
    border-radius: 100%;

}

.agent__Information-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 25px;
    padding: 0 70px;
    justify-content: center;
}

.agent__Information {
    display: flex;
    flex-direction: column;
    row-gap: 18px;
}

.agent__Information-name {
    font-size: 26px;
}

.agent__information-expertise {
    font-size: 18px;
}

.agent__Information-button {
    width: 250px;
    height: 50px;
    text-decoration: none;
    background-color: #ff6464;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agent__Information-socialMedia {
    display: flex;
    column-gap: 20px;
}

.socialAccount__link > svg {
    width: 30px;
    height: 30px;
    transition: all 200ms ease-in-out;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
}

.telegramIcon:hover {
    cursor: pointer;
    fill: #039be5;
}

.instagramIcon:hover {
    cursor: pointer;
    fill: rgb(201, 37, 37);
}

.whatsappIcon:hover {
    cursor: pointer;
    fill: green;
}

.linkedinIcon:hover {
    cursor: pointer;
    fill: #0077b5;
}

.WebIcon:hover {
    cursor: pointer;
    color: #0077b5;
}

.agent__company {
    margin-top: 40px;
}

.agent__company-title {
    font-size: 24px;
    border-right: 8px solid gold;
    padding-right: 10px;
    padding-bottom:5px;
    padding-top:5px;
    margin-bottom: 20px;
}

.agent__description-container {
    margin-right: 30px;
    min-height: 200px;
    background-color: #e6f2ff;
    border-radius: 2px;
    /*border: 1px solid #66b3ff;*/
    padding: 10px 6px;
    line-height: 2.0;
    text-align: justify;
    font-size: 16px;
}

.agent__description {
    padding: 10px;
}

.agent__projects {
    margin-top: 30px;
}

.agent__projects-container {
    margin-right: 30px;
    background-color: #f9f9f9;
    border: 1px solid #e6e6e6;
    margin-bottom: 50px;
    border-radius: 3px;
    padding-top:20px;
    padding-bottom:20px;
}

.agent__project {
    padding: 10px;
    /*display: flex;
    justify-content: space-between;*/
}

.project__details {
    display: flex;
    flex-direction: column;
    row-gap: 17px;
}

.project__title {
    font-size: 24px;
    font-weight: 600;
}

.project__intro {
    color: #787878;
    font-size: 18px;
}

.project__year {
    font-size: 18px;
    color: white;
    font-weight: bold;
    background-color: black;
    width: 62px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
   
}

.project__description {
    line-height: 25px;
    text-align: justify;
    font-size:16px;
    padding-right:40px;
    padding-left:20px;
}

.project__images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 12px;
    column-gap: 12px;
}

.project__image {
    width: 246px;
    height: 180px;
}

.image-container {
    display: flex; /* استفاده از Flexbox */
    flex-wrap: wrap; /* اجازه به تصاویر برای جابجایی به خط بعدی */
    justify-content: normal; /* فاصله بین تصاویر */
    margin-bottom: 15px;
    margin-top: 20px;
    margin-left:10px;
    margin-right:15px;
  

}
.fade-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #aaa, transparent);
}

    .image-container img {
        height: auto; /* حفظ نسبت ابعاد */
        margin-top:12px;
        float:right;
    }


/*.vendor-profile .profile-left .profile-detail {
    width: 50%  !important;
  
}

.ContactData
{
    padding-right:90px !important;
}*/

/* حالت دسکتاپ */
@media (min-width: 1024px) {
    .image-container img {
        width: 32%; /* 30 درصد عرض صفحه */
    }
}

/* حالت تبلت */
@media (min-width: 768px) and (max-width: 1023px) {
    .image-container img {
        width: 45%; /* 40 درصد عرض صفحه */
    }
}

/* حالت موبایل */
@media (max-width: 767px) {
    .image-container img {
        width: 100%; /* تمام عرض صفحه */
    }
}

@media (max-width: 768px) {
	

	.agent__description-container, .agent__projects-container{
    margin-right: 0;

}
	
    .Agent__header {
        grid-template-columns: 1fr;
        grid-template-rows: 360px 400px;
    }

    .agent__profile {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .agent__Information-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        row-gap: 30px;
        padding: 0 20px;
        border-radius: 15px;
		
       /* border: 1px solid #43525a;*/
      
       
    }

    .agent__Information {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        align-items: center;
    }

    .agent__Information-name {
        font-size: 28px;
        font-weight: 600;
    }

    .agent__company {
        display: flex;
        flex-direction: column;
        margin-top: 40px;
    }

    .agent__company-title {
        display: flex;
        justify-content: center;
        border-right: none;
    }

        .agent__company-title > span {
            border-bottom: 10px solid gold;
            padding-bottom: 12px;
        }

    .agent__description {
        font-size: 14px;
    }

   /* .agent__project {
        flex-direction: column;
    }*/

    .project__images {
        grid-template-columns: 1fr;
        align-self: center;
        margin-top: 30px;
    }
}
